jquery事件不会在ajax调用后触发
这是jQuery的一个相当奇怪的问题。 我正在加载一个div
<div id="container"> 在页面加载。 每条logging都是带有与之关联的“删除”ajax函数的表格数据。 当页面加载并点击“删除”链接时，ajax调用closures就好了。 但是，一旦事件被触发，数据就会从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(); } }); }); });
当你删除一个元素，然后将其replace（通过JavaScript），它会丢失页面加载时添加到它的任何事件绑定。
（这也适用于页面加载后添加到页面的内容 – 即ajax加载的内容）
有几种可能的解决scheme。
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()方法使用事件委托来告诉父元素保留事件处理程序代码（第三个参数），并在事件目标（第二个参数）对其执行特定types的事件（第一个参数）时触发它。
如果您使用的是1.7之前版本的jQuery，请使用现在已弃用的委托方法，它本质上是一样的。
另外，值得注意的是，由于事件通过dom树“冒泡”的方式，事件目标（.on（）方法的第二个参数）必须是委托元素（jQuery对象的select器）的后代。 例如， 以下将无法工作
<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 .... }); </script>
body或document元素通常是安全的select，因为通常页面上的每个元素都是后代。
您可以将事件脚本封装在DIV中，并在dynamic加载内容之后运行Replaceall命令。
<div class="somescript"> -- Event Script that you want to map with dnamically added content <div>
– dynamic加载您的内容并在其后运行下面的命令。
$(".somescript").replaceAll($(".somescript"));
一旦dynamic加载的内容被加载并且replace命令已经被运行，事件将被映射并且代码将正常运行。
