jQuery не добавляется к динамически созданным элементам

Question

На моей странице у меня есть динамически сгенерированный список переключателей (созданных с помощью AJAX). Список переключателей динамически генерируется, потому что он изменяется в зависимости от предыдущего выбора формы. Вот пример динамически генерируемый список переключателей (это отображается в Firefox DOM-просмотрщик надстройки, но не в «View Page Source»):

<li> 
<input name="giftcard_value" type="radio" id="25" value="25" /> 
<label for="25">$25</label> 
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a> 
</li> 

<li> 
<input name="giftcard_value" type="radio" id="50" value="50" /> 
<label for="50">$50</label> 
<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a> 
</li> 

У меня также есть другой скрипт JQuery, который я использую «щелкать» радиокнопками косвенно через ссылки/изображения. В приведенном выше коде фактический переключатель (внутри тега ввода) скрыт от пользователя. Пользователь нажимает на переключатель, нажимая на ссылку «Выбор», которая имеет класс «радио-выбор» (на самом деле это изображение). Сценарий jQuery обнаруживает, когда на ссылку/изображение нажимается «$ («. Radio-select »). Нажмите«, а затем запускает функцию, которая «нажимает/проверяет» фактический переключатель. Вот скрипт JQuery:

$(".radio-select").click(
      function(event) { 
       event.preventDefault(); 
       var $boxes = $(this).parent().parent().children(); 
       $boxes.removeClass("selected"); 
       $(this).parent().addClass("selected"); 
       $(this).parent().find("[type=radio]").click().attr("checked","checked"); 
      } 
     ); 

Моя проблема заключается в том, что скрипт JQuery не работает с динамически генерируемых радиокнопок. Он работает, если я жестко закодирую радиокнопки в html (видимый через «источник страницы просмотра» в браузере), но не если они генерируются динамически. Похоже, что jQuery не может обнаружить «.click» в ссылке/изображении и, таким образом, никогда не нажимает на фактический переключатель. Любая идея, в чем проблема? Любая помощь приветствуется!

Answer 1

$(".radio-select").live("click", function(event){   
        event.preventDefault(); 
        var $boxes = $(this).parent().parent().children(); 
        $boxes.removeClass("selected"); 
        $(this).parent().addClass("selected"); 
        $(this).parent().find("[type=radio]").click().attr("checked","checked"); 
       } 
      ); 

Answer 2

проверка delegate и on способ.

Пример

$("table").delegate("td", "click", function() { 
    $(this).toggleClass("chosen"); 
}); 

http://api.jquery.com/delegate/

из JQuery страницы,

По JQuery 1.7, .delegate() был заменен методом .on(). Для более ранних версий, однако, остается наиболее эффективным средством для делегирования событий использования

http://api.jquery.com/on/

пример

$("p").on("click", function(){ 
alert($(this).text()); 
}); 

Answer 3

Проблема заключается в том, что, когда ваш метод щелчок называется, событие обработчик, который создается, привязан только ко всем элементам, которые существуют в то время. Ваше решение состоит в том, чтобы добавить вызов, чтобы прикрепить обработчик клика при создании элемента или использовать функцию on() для присоединения к селектору.

Answer 4

Если вы используете jQuery 1.3.2 и выше, вам нужно использовать jQuery live. Так что ваши привязки станут:

$(".radio-select").live('click',function(event) { 

      event.preventDefault(); 
      var $boxes = $(this).parent().parent().children(); 
      $boxes.removeClass("selected"); 
      $(this).parent().addClass("selected"); 
      $(this).parent().find("[type=radio]").click().attr("checked","checked"); 

     } 
    ); 

Если вы используете JQuery ниже 1.3.2, используйте livequery плагин.