[英]Jquery Event won't fire after ajax call
这是 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's.on() 方法。 使用它,您可以将事件处理程序绑定到事件目标以外的元素 - 即永远不会从页面中删除的元素。
$(document).ready(function(){
$('body').on('click','.myClickableElement',function(){
... event handler code ....
});
});
一些进一步的解释:
.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
元素通常是安全的选择,因为通常页面上的每个元素都是后代。
您可以将事件脚本包含在 DIV 中,并在动态加载内容后运行 Replaceall 命令。
<div class="somescript">
-- Event Script that you want to map with dnamically added content
<div>
-- 动态加载您的内容并在其后运行以下命令。
$(".somescript").replaceAll($(".somescript"));
一旦加载了动态加载的内容并运行了替换命令,事件将被映射并且代码将正常运行。
我的评论太长了,抱歉。
只是一个问题和评论,虽然我看到这是一个老帖子。 我在使用时遇到了很多麻烦:$(document).on('click','#xxx',function(e){});将处理程序附加到使用AJAX返回的内容,而不是使用函数(){ $('#xxx).on('click',function(e){});}并在AJAX调用返回成功后调用它。是否有某种技巧或指南使用该方法?我得到了委托涉及,并且我已经尝试过使用它但它通常不起作用。我可以尝试委托给封闭的元素。也许它不会因为某种原因冒泡到文档或正文中?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.