События jQuery не происходят после загрузки AJAX?

.click() является сокращением .bind('click') , которое привязывается только к элементам, которые уже находятся на странице

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

 // If the user makes a picture bigger $(".makePictureBig").live('click',function() { //code }); 

Редактировать:

Начиная с jQuery 1.7, live устарел. Вы можете использовать jQuery :

 $(".makePictureBig").on('click', function() { //code }); 

Или для делегированных обработчиков событий:

 $("#wrapper").on('click', '.makePictureBig', function(){ //code }); 

Это связано с тем, что все ваши события, которые вы пишете внутри готового документа, будут выполняться только для элементов, доступных во время загрузки страницы.

Вам нужно будет использовать .live() для привязки событий для всех текущих и динамически создаваемых элементов.

Или вы можете связать события еще раз в обратном вызове успеха вашей функции ajax.

Вам нужно повторно привязать события загруженных элементов.

что-то вроде:

 document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData; $(".makePictureBig").click(picBigFunction); 

Вам придется перегруппировать события ajax на любом загруженном вами новом контенте.

Возьмите свой код, который инициализирует событие click (то есть часть, в которой есть .click (…)) и помещает ее в отдельную функцию.

Например:

 function initImage() { ....click(function() { } } 

Затем вызовите эту функцию как на document.ready, так и на событие ajax success.

Также может быть полезно добавить следующее:

 $(".makePictureBig").unbind("click"); 

прямо перед:

 $(".makePictureBig").click(function() { ... 

Чтобы вы не прикрепляли одно и то же событие дважды к каждому сообщению ajax.

Полный пример (это делается быстро, и вам может не понадобиться перезаписывать логотип, но безопаснее делать все это в одном месте, если вы измените что-нибудь еще с разными сообщениями ajax):

 $(document).ready(function() { initImages(); } function initImages() { $(".makePictureBig").unbind("click"); $(".makePictureBig").click(function() { var theClassId = $(this).attr('id'); var theID = theClassId.substring(6) var bigPictureComment = "#bigpicture_comment_" + theID; var littlePictureComment = "#littlepicture_comment_" + theID; var ddd = document.getElementById(theClassId); var getBig = document.getElementById(bigPictureComment); var getLittle = document.getElementById(littlePictureComment); if (ddd.style.width == "180px") { ddd.style.width="430px"; ddd.style.marginBottom='10px'; ddd.style.cssFloat="left"; $(littlePictureComment).hide(); $(bigPictureComment).show(); } else { ddd.style.width="180px"; ddd.style.marginBottom='0px'; $(bigPictureComment).hide(); $(littlePictureComment).show(); } }); $("#logo").unbind("click"); $("#logo").click(function() { $("#right_bar_wrapper").animate({ height: 'toggle', opacity: 'toggle' }, '200'); var thePostData = "username=c"; $.ajax({ type: "POST", url: "http://myflashpics.com/v2/process_newsfeed.php", data: thePostData, success: function(theRetrievedData) { document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData; $("#right_bar_wrapper").fadeIn("200"); initImages(); } }); }); } 

я бы предложил проверить плагин jquery под названием livequery

с тем, что вы могли бы заменить:

 $(".makePictureBig").click(function() { //existing stuff 

с

 $(".makePictureBig").livequery(function() { $(this).click(function() { //existing stuff 

С помощью livequery, в любое время, когда элемент помещается в dom, который соответствует селектору, срабатывает функция обратного вызова.

Другие ответы верны, но я буду расширяться. Когда вы связываете событие с jQuery.bind (обратите внимание, что click и т. Д. Являются макросами для bind ), он связывает это событие с элементами DOM, которые существуют в текущее время. Селектор jQuery сканирует DOM для всех элементов, которые соответствуют селектору ( $("#hoo").click() связывает обработчик событий с любым существующим элементом с id = "hoo").

Когда элементы добавляются в DOM с помощью ajax или других средств, они автоматически не привязывают к ним всех обработчиков. Для этого jQuery придется сканировать DOM для каждого события и применять обработчик к любому новому элементу, который он нашел в любое время. Это непрактично.

Эти два решения включают применение обработчиков к любым элементам, загруженным в DOM позже. Например, измените функцию «щелчок», которую вы указали выше, на фактическую функцию:

 function makePictureBig() { var theClassId = this.id; ... } 

Затем скажем $(".makePictureBig").click(makePictureBig); … и в вашем Ajax: $("#right_bar_wrapper").html(theRetrievedData) .find(".makePictureBig").click(makePictureBig);

Второй вариант – использовать .live() , .delegate() или плагин, например .livequery() .

Делегат – лучший вариант, чем Live. Вы можете делегировать элемент более высокого уровня. Вы даже можете сделать:

 $('body').delegate('.makePictureBig', 'click', function() { //code }); 

использование

 $("****").live('click',function() {});