[英]How to bind Events on Ajax loaded Content?
我有一个链接myLink
,它应该将 AJAX 加载的内容插入到我的 HTML 页面的div
( myLink
) 中。 问题是我与 jQuery 绑定的click
事件没有在插入到 appendedContainer 的新加载的内容上执行。 click
事件绑定在未使用我的 AJAX 函数加载的 DOM 元素上。
我必须更改什么才能绑定事件?
我的 HTML:
<a class="LoadFromAjax" href="someurl">Load Ajax</a>
<div class="appendedContainer"></div>
我的 JavaScript:
$(".LoadFromAjax").on("click", function(event) {
event.preventDefault();
var url = $(this).attr("href"),
appendedContainer = $(".appendedContainer");
$.ajax({
url: url,
type : 'get',
complete : function( qXHR, textStatus ) {
if (textStatus === 'success') {
var data = qXHR.responseText
appendedContainer.hide();
appendedContainer.append(data);
appendedContainer.fadeIn();
}
}
});
});
$(".mylink").on("click", function(event) { alert("new link clicked!");});
要加载的内容:
<div>some content</div>
<a class="mylink" href="otherurl">Link</a>
对动态创建的元素使用事件委托:
$(document).on("click", '.mylink', function(event) {
alert("new link clicked!");
});
这确实有效,这是一个示例,我在其中附加了一个带有.mylink
类而不是data
的锚点 - http://jsfiddle.net/EFjzG/
如果在调用 .on() 之后追加内容,则需要在加载内容的父元素上创建委托事件。 这是因为在调用 .on() 时绑定了事件处理程序(即通常在页面加载时)。 如果调用 .on() 时元素不存在,则事件不会绑定到它!
由于事件通过 DOM 向上传播,我们可以通过在我们知道页面加载时存在的父元素(下面示例中的.parent-element
)上创建一个委托事件来解决这个问题。 就是这样:
$('.parent-element').on('click', '.mylink', function(){
alert ("new link clicked!");
})
关于该主题的更多阅读:
如果您的问题是“如何在 ajax 加载的内容上绑定事件”,您可以这样做:
$("img.lazy").lazyload({
effect : "fadeIn",
event: "scrollstop",
skip_invisible : true
}).removeClass('lazy');
// lazy load to DOMNodeInserted event
$(document).bind('DOMNodeInserted', function(e) {
$("img.lazy").lazyload({
effect : "fadeIn",
event: "scrollstop",
skip_invisible : true
}).removeClass('lazy');
});
所以你不需要把你的配置放在你的每一个 ajax 代码中
从 jQuery 1.7 开始,不推荐使用.live()
方法。 使用.on()
附加事件处理程序。
例子 -
$( document ).on( events, selector, data, handler );
对于那些仍在寻找解决方案的人,最好的方法是将事件绑定在文档本身上,而不是与“准备就绪”事件绑定,例如:
$(function ajaxform_reload() {
$(document).on("submit", ".ajax_forms", function (e) {
e.preventDefault();
var url = $(this).attr('action');
$.ajax({
type: 'post',
url: url,
data: $(this).serialize(),
success: function (data) {
// DO WHAT YOU WANT WITH THE RESPONSE
}
});
});
});
例如,如果您的 ajax 响应包含 html 表单输入,那么这会很棒:
$(document).on("change", 'input[type=radio][name=fieldLoadedFromAjax]', function(event) {
if (this.value == 'Yes') {
// do something here
} else if (this.value == 'No') {
// do something else here.
} else {
console.log('The new input field from an ajax response has this value: '+ this.value);
}
});
改用 jQuery.live() 。 文档在这里
例如
$("mylink").live("click", function(event) { alert("new link clicked!");});
对于 ASP.NET,试试这个:
<script type="text/javascript">
Sys.Application.add_load(function() { ... });
</script>
这似乎适用于页面加载和更新面板加载
请在此处找到完整的讨论。
Ajax 加载内容事件绑定的重要步骤...
01 . 首先取消绑定或关闭选择器上的事件
$(".SELECTOR").off();
02 . 在文档级别添加事件侦听器
$(document).on("EVENT", '.SELECTOR', function(event) {
console.log("Selector event occurred");
});
这是我的首选方法:
// bind button click to function after button is AJAX loaded
$('#my_button_id').bind('click', function() {
my_function(this);
});
function my_function () {
// do stuff here on click
}
我在 AJAX 调用完成后立即放置此代码。
作为 JS 新手,我会添加一点对我来说并不明显 - 通常您的事件会在文档中进行连接,例如:
$(function() {
$("#entcont_table tr td").click(function (event) {
var pk = $(this).closest("tr").children("td").first().text();
update_contracts_details(pk);
});
}
但是,使用事件委托,您会想要:
$(function() {
// other events
}
$("#entcont_table").on("click","tr td", function (event) {
var pk = $(this).closest("tr").children("td").first().text();
update_contracts_details(pk);
});
如果您的事件委托是在准备好的文档中完成的,则会出现类似错误:
cant assign guid on th not an boject
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.