对于jQuery,这是一个非常奇怪的问题。我正在加载一个div
<div id="container">
页面加载。每条记录都是表格数据,并带有与之关联的“删除” ajax函数。当页面加载并单击“删除”链接时,ajax调用会触发。但是,一旦触发事件,就会从ajax调用返回数据,并且div中会填充数据(但页面不会刷新或重新加载)。当我再次单击链接时,ajax脚本将不会触发。这是我的代码:
$(document).ready(function() { $("button.done").button({ }).click(function() { var BatchID = $("input#BatchID").val(); var Amount = $("input#Amount").val(); var Name = $("input#CheckName").val(); var Check_Number = $("input#Check_Number").val(); var Company = $("select#Company").val(); var Department = $("select#Department").val(); $.ajax({ type: 'GET', url: '/app/usagCheckEntryWS.html', data: { "BatchID" : BatchID, "Amount" : Amount, "Name" : Name, "Check_Number" : Check_Number, "Company" : Company, "Department" : Department }, success: function (data) { var ang = ''; var obj = $.parseJSON(data); $.each(obj, function() { ang += '<table><tr><td width="45">' + this["RefID"] + '</td><td width="140">' + this["Name"] + '</td><td width="95">' + this["CheckNumber"] + '</td><td align="right" width="70">$' + this["Amount"] + '</td><td width="220" style="padding-left: 15px;">' + this["Description"] + '</td><td><div class="delete" rel="' + this["RefID"] + '"><span>Delete</span></div></td></tr></table>'; }); $('#container').html(ang); $("input#Amount").val(''); $("input#CheckName").val(''); $("input#Check_Number").val(''); $("select#Company").val('MMS'); $("th#dept").hide(); $('input#CheckName').focus(); } }); }); });
当您删除元素然后通过javascript替换它时,它会丢失页面加载时添加到该元素的所有事件绑定。
(这也适用于页面加载后添加到页面的内容,即ajax加载的内容)
有几种可能的解决方案。
1)封装您的“绑定”代码,并在页面加载时以及在有问题的元素添加回页面后立即调用它。例如:
$(document).ready(function(){ // bind event handlers when the page loads. bindButtonClick(); }); function bindButtonClick(){ $('.myClickableElement').click(function(){ ... event handler code ... }); } function updateContent(){ $.ajax({ url : '/ajax-endpoint.php', data : {'onMyWay' : 'toServer'}, dataType : 'html', type : 'post', success : function(responseHtml){ // .myClickableElement is replaced with new (unbound) html element(s) $('#container').html(responseHtml); // re-bind event handlers to '.myClickableElement' bindButtonClick(); } }); }
2) 更优雅的处理方式 使用jQuery的.on()方法。有了它,您就可以将事件处理程序绑定到事件目标以外的元素上,即永远不会从页面中删除的元素。
$(document).ready(function(){ $('body').on('click','.myClickableElement',function(){ ... event handler code .... }); });
一些进一步的解释:
该.on()方法使用事件委托 来告诉父元素保留事件处理程序代码(第3个参数),并在事件目标(第2个参数)执行某种类型的事件(第一个参数)时将其触发。
.on()
如果您使用的是1.7之前的jQuery版本,请使用现在不建议使用的委托方法,该方法实际上执行相同的操作。
另外,值得注意的是,由于事件在dom树中“冒泡”的方式,事件目标(.on()方法的第二个参数)必须是委托元素(jQuery对象的选择器)的后代。
以下将不起作用
<div id="container-1"> <div> <div id="another-div"> Some Stuff </div> </div> </div> <div id="container-2"> <a id="click-me">Event Target!!!</a> </div> <script type="text/javascript"> $('#container-1').on('click','#click-me',function(){ ... event handler code .... // This will never execute, should've used '#container-2', or 'body', or 'document' instead of '#container-1' }); </script>
该body或document元素通常是安全的选择,因为通常每个页面上的元素的后裔。
body
document