Привязать события к нескольким добавленным данным

Я использую jQuery для отправки некоторых данных в PHP-скрипт, который обрабатывает его, а затем добавляет эхо-данные. Теперь есть также некоторый сценарий jQuery среди данных, которые отражают все это хорошо и хорошо, если вы не отправляете два экземпляра данных в сценарий.

Объяснение: Представьте, что я отправил некоторый текст (скажем A) на PHP-скрипт обработки, который затем вставляет данные в db и эхо-данные вместе с кнопкой удаления; теперь кнопка удаления работает отлично (она удаляет и все ..), но если я выложу другой кусок текста (скажем, B) на процессор (без перезагрузки страницы между сообщениями) и эхо из данных вместе с кнопкой удаления, только первый удаляется, а второй – нет.

Представление кода

Две текстовые строки размещаются (text1 и text2) без перезагрузки страницы, затем добавляется div; каждая из них имеет кнопку удаления и текст, но событие click привязано только к первой кнопке удаления и независимо от того, сколько раз я нажимаю вторую кнопку удаления, она ничего не делает.

<div class="a">text1<div class="delete">X</div></div> // this one gets the click event <div class="b">text2<div class="delete">X</div></div> // this one doesn't 

Ниже приведен скрипт (упрощенный)

 <script> $(document).ready(function () { $(".delete").click(function () { $(this).hide(); }); }); </script> 

Примечание: приведенный выше javascript повторяется дважды, поскольку вы дважды публикуете текст без перезагрузки страницы; проблема исчезает при перезагрузке страницы.


Для уточнения просьба оставить комментарий

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

 $(document).on('click','.delete',function() { $(this).hide() }); 

Кроме того, это лучше для производительности, если вы замените document статическим родительским селектором на .delete