Ajax 调用后 Jquery 事件不会触发

这是 jquery 的一个相当奇怪的问题

<div id="container">

在页面加载上。每条记录都是表格数据，带有一个与之相关联的“删除”Ajax 函数。当页面加载并点击“ delete”链接时，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();
}
});
});
});

88503

小开

最佳答案

当您删除一个元素然后替换它(通过 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个参数)上执行了某种类型的事件(第1个参数)时触发它。

如果您在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元素通常是安全的选择，因为页面上的每个元素通常都是子元素。