jQuery，AJAXed内容失去了它的绑定
所以想象一下这个场景，我有一个列表，它有一些分页，当用户点击下一个，链接被jQuery劫持，它使用$.ajax函数（我在下面提供）去并获取下一页内容并将其显示在原始容器中。 这包括分页链接以及我们希望它们也更新。
第一页更改工作正常，但在此阶段我们已经失去了link元素和jQuery规则之间的绑定：
$('#paging a').click(function(event) { event.preventDefault(); getElementContents('#target_container','',$(this).attr('href'),false); // arguements are (target element, data (for $ajax), url (for $ajax), highlight) });
我有什么选择来维护事件和函数之间的绑定？
作为参考，这是$.ajax包装函数：
var ajax_count = 0; function getElementContents(target,data,url,highlight) { if(url==null) { url='/'; } if(data==null) { var data=new Array(); } if(highlight==null || highlight==true) { highlight=true; } else { highlight=false; } $.ajax({ url: url, data: data, beforeSend: function() { /* if this is the first ajax call, block the screen */ if(++ajax_count==1) { $.blockUI({message:'Loading data, please wait'}); } }, success: function(responseText) { /* we want to perform different methods of assignment depending on the element type */ if($(target).is("input")) { $(target).val(responseText); } else { $(target).html(responseText); } /* fire change, fire highlight effect... only id highlight==true */ if(highlight==true) { $(target).trigger("change").effect("highlight",{},2000) } }, complete: function () { /* if all ajax requests have completed, unblock screen */ if(--ajax_count==0) { $.unblockUI(); } }, cache: false, dataType: "html" }); }
谢谢！ 🙂
编辑
嗯，刚发现这个问题 ……调查一下:-)
尝试使用jquery.live：
$('#paging a').live('click', function(event) { event.preventDefault(); getElementContents('#target_container','',$(this).attr('href'),false); // arguements are (target element, data (for $ajax), url (for $ajax), highlight) });
如果使用jQuery 1.9或更高版本，则.live不再存在，因此您可以使用.on函数：
$(document).on('click', '#paging a', function (event) { event.preventDefault(); getElementContents('#target_container','',$(this).attr('href'),false); });
方法.live（）它已经在jQuery的1.9版本上删除了，而是推荐使用方法.on（）。
但是如果你有一个元素列表，你可以通过他的类名包装这些元素，如$（“。view-page”）。on（“click”，function（）{}）; 并且您加载了同一个类的另一个元素块（如分页页面），绑定将丢失。
旧的.live（）方法解决了这个问题（ “为现在和将来与当前选择器匹配的所有元素附加一个事件处理程序。” ）但是你可以通过另一种forms使用.on（）来做同样的事情：
$(document).on("click", ".view-page", {}, function(event){ // anything you want to do... });
即使分页区域中的元素块发生变化，这也不会松散绑定，因为您告诉jQuery任何时候DOM中的所有内容都会有这种行为。
您的分页链接是否也通过ajax加载替换？ 如果是这样，它们是新的DOM元素，并且原始的分页元素（绑定了事件处理程序）不再存在。 如果是这种情况，请查看jQuery的.live（）方法来绑定您的点击处理程序。
您可以在AJAX调用的回调函数中重新绑定事件。
complete: function () { /* if all ajax requests have completed, unblock screen */ if(--ajax_count==0) { $.unblockUI(); } $('#paging a').click(function(event) { event.preventDefault(); getElementContents('#target_container','',$(this).attr('href'),false); // arguements are (target element, data (for $ajax), url (for $ajax), highlight) }); }