Функция привязки к элементам, которые не находятся в DOM при загрузке страницы

0

Код здесь.

/*Other code irrelevant*/
<div class="form-group col-lg-1"> 
     <input type="button" class="btn btn-default update"  value="Update">
</div> 

/*Other code irrelevant*/
<div class="form-group col-lg-1"> 
     <input type="button" class="btn btn-default update"  value="Update">
</div>

В js файле у меня есть следующее:

$('.update').click(function() {
    alert("it work");
});

Однако, когда я нажимаю кнопку обновления, будет отвечать только первая кнопка обновления, остальное - нет.

Важно: только первая кнопка обновления находится в html файле при загрузке страницы, остальные кнопки обновления добавляются после нажатия кнопки добавления на странице.

Поэтому я хочу, чтобы все кнопки обновления, в том числе те, которые не находятся в DOM при загрузке страниц, работают так, как я ожидал, в этом случае просто дайте мне предупреждение.

Благодарю.

  • 2
    Он работает правильно, у вас возникнут другие проблемы в скрипте!
  • 3
    Хорошо работает здесь jsfiddle.net/j08691/sRQ9x
Показать ещё 5 комментариев
Теги:

3 ответа

2
Лучший ответ

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

$('body').on('click', '.update', function(e) {
  alert("it work")
});

Это означает, что привязка обработчика события click к <body>, его фильтрация, так что только события, которые пузырятся от потомков, имеющих update класса, вызовут его.

Поделиться
  • 0
    +1, потому что вы объяснили, что такое синтаксис и почему он будет работать. Хороший ответ.
0

Попробуй это:

$('body').on('click', '.update', function(e){alert("it work")});

Проблема в том, что $(selector).click(handler) задается при загрузке страницы, тогда, если вы добавляете другие элементы с тем же селектором, то jquery не учитывает новые элементы.

Чтобы исправить это, вы можете установить обработчик в родительский (статический) элемент, а затем каждый раз, когда вызывается событие, родитель получает обработчик и позволяет выполнить обработчик в дочернем (динамическом) элементе.

Поделиться
  • 0
    Может быть, вы должны объяснить, почему это работает, чтобы ОП мог правильно понять и использовать технику.
  • 1
    @cookiemonster вы правы, редактируя ответ ...
0

Изменение: на самом деле .each() Не будет работать на динамическом DOM, я не правильно прочитал вопрос. Вы определенно хотите использовать селектор .on(), как показано другими пользователями. Это будет динамически извлекать DOM для вашего сайта на каждом клике (с учетом чего-либо, добавленного в BODY). Вы можете увидеть это в действии с помощью этого кода:

$('body').on('click', '.update', function(e) {
        var value = $(this).val();
        alert( 'We just clicked button with value: ' + value );    
});

$('#add').click(function(){

    var appendage = '<br />/*Other code irrelevant*/<br /><div class="form-group col-lg-1"><input type="button" class="btn btn-default update" value="Update X"></div><br />';
    $('.col-lg-1').append(appendage);

});

JSFIDDLE

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню