Проблема создания новых элементов в jQuery

Я довольно новичок в jQuery и пытаюсь понять часть кода, который я только что написал.Проблема создания новых элементов в jQuery

У меня есть простой HTML

<body> 
    <div id="theDiv"> 
     <button>This is the div</button> 
    </div> 
</body>

И мой сценарий выглядит следующим образом

$(document).ready(function(){ 
    $("button").on("click",function(){ 
     $("<div></div>").attr("id","myDiv").appendTo("#theDiv"); 
     $("<select></select>").addClass("mySelects").appendTo("#myDiv"); 
    }); 
    $(".mySelects").on("click",function(){ 
     console.log("Do some stuff here"); 
     $('<option value="Text">Text</option>').appendTo(".mySelects") 
    }); 
});

Так что я хочу сделать, это добавить новый div с select и добавить select к классу , Scpipt выше не работает, я не знаю, почему, в то время как ниже код делает трюк

$(document).ready(function(){ 
    $("button").on("click",function(){ 
     $("<div></div>").attr("id","myDiv").appendTo("#theDiv"); 
     $("<select></select>").addClass("mySelects").appendTo("#myDiv"); 
     $(".mySelects").on("click",function(){ 
      console.log("Just added the class"); 
      $('<option value="Text">Text</option>').appendTo(".mySelects") 
     }); 
    }); 
});

Я надеюсь, что некоторые из вас JQuery Gurus может объяснить мне, что происходит, так как я не достаточно, чтобы действительно знать поймите это сами.

Вот скрипку я использую http://jsfiddle.net/k1stLsft/2/

Приветствия.

источник

2014-11-12 Annatar

Поскольку '.mySelects' не доступен при загрузке DOM, вам необходимо делегировать' click' событие. – George

Вот несколько вариантов, которые добавляют выберите вариант. Первый делегатом, как Джордж предложил:

$("body").delegate(".mySelects", "click",function(){ 
     console.log("Just added the class"); 
     $('<option value="Text">Text</option>').appendTo(".mySelects") 
    }); 


    $(document).on("click", ".mySelects",function(){ 
     console.log("Just added the class"); 
     $('<option value="Text">Text</option>').appendTo(".mySelects") 
    });

Fiddle

источник

2014-11-12 21:04:53 jyrkim

Спасибо за ответ, я изо всех сил пытался понять концепцию делегирования. Для справки, если кто-то наткнулся на это, в документации API jQuery предлагается использовать '.on' для более новых версий, поэтому второй пример будет более уместным, если вы используете самую последнюю библиотеку jQuery. – Annatar

<select> с классом .mySelects не существует, пока не будет нажата кнопка.

источник

2014-11-12 20:56:57 kevintechie

Как уже говорилось, когда вы устанавливаете событие onclick, элемент, в котором вы хотите включить событие, еще не существует. Вам нужно использовать делегат jQuery следующим образом.

$("body").on("click", ".mySelects", function() {...});

источник

2014-11-12 21:01:33 Shriike

Проблема создания новых элементов в jQuery

ответ

Смежные вопросы