Добавление действия к элементу DOM, добавленному через AJAX

Question

с небольшой проблемой здесь.У меня есть поток сообщений на моем сайте, у каждого сообщения есть кнопки, которые выполняют различные действия, настроенные в моем $(document).ready() сейчас, чтобы добавить сообщения, я делаю AJAX-вызов, который возвращает HTML для нового элемента сообщения, но действия вмои предыдущие $(document).ready() не применимы к этому новому элементу, и добавление его в $(document).ready() для элемента вызывает дублирование кнопок из уже опубликованных элементов.

Любая идея, как мне обойти это

Answer 1

Элементы, добавленные после события documnet ready, не принимают события привязки (вы называете это ations).Вы можете использовать .click() или .hover() или .bind('click', function(){}), и ни один из них не работает.Вы можете использовать jQuery .live() или .delegate()

Использование delegate намного лучше, потому что при использовании live для click (например,) это означает, что вы слушаете любой click, происходящий с вашим документом, и определяете, действительно ли это click вы ищете или нет?Но с delegate вы ограничиваете клики, которые компьютер обрабатывает, чтобы найти ваш click.

$('.myinput').live('click', function(){
     // do something if a click happened and it was on my input
 })

$('.myDiv').delegate('.myinput', 'click', function(){ 
     // do something if a click happened in my div and it was on my input 
})

Answer 2

если вы используете $(selector).live(eventType, handler), это должно добавить события ко всем элементам, соответствующим этому селектору .. даже если они добавлены после загрузки DOM:

http://api.jquery.com/live/

Answer 3

как @Mohsen сказал, что есть способ решить эту проблему с помощью .live (), теперь он устарел, и есть альтернативный способ:

Как изменить устаревший метод?

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+

ссылка: jQuery .live ()

У меня была такая же проблема, и эта последняя с ".on" отлично работает для меня.

Может быть, у кого-то есть такая же проблема и используйте еетоже