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

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

2 голосов
/ 05 января 2012

На моей странице есть динамически генерируемый список переключателей (созданный с помощью AJAX).Список переключателей генерируется динамически, потому что он изменяется в зависимости от предыдущего выбора формы.Вот пример динамически генерируемого списка переключателей (это появляется в дополнении DOM для просмотра DOM Firefox, но не в «View Source 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"). Click ", а затем запускает функцию, которая" щелкает / проверяет "фактическую кнопку-переключатель.Вот скрипт 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» на ссылку / изображение, и, таким образом, никогда не нажимает фактическую кнопку-переключатель.Есть идеи, в чем проблема?Любая помощь будет высоко ценится!

Ответы [ 4 ]

7 голосов
/ 05 января 2012

check 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() );
});
3 голосов
/ 05 января 2012 
$(".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");
                }
            );
1 голос
/ 05 января 2012

Если вы используете 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 .

1 голос
/ 05 января 2012

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

...