[英]Wiring up click event using jQuery on() doesn't fire on injected HTML via Ajax call
我有一个局部视图,它是通过一个带有html数据类型的Ajax调用返回的 - 在这个html中是一个带有id的锚标签,我使用jQuery的.on()
API和版本1.7.1连接点击事件框架。
为简洁起见,想象部分视图如下:
<div id="container" class="modal-dialog">
<h1>Heading</h1>
<a id="thelink" href="#">
<img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a>
</div>
..并通过一个标准的$.ajax
POST到一个MVC控制器动作,它返回上面的部分视图结果,我拦截并吐入模态对话框。
我试图连接的事件代码如下所示:
$(function () {
$("#thelink").on("click", function (e) {
e.preventDefault();
$("#jquery-ui-dialog-box").dialog("close");
});
});
现在,如果我将on()
切换为live()
- 一切都按预期工作。 使用上面的代码虽然在IE8(IE8标准模式)中事件没有触发 - 断点没有被击中,jQuery UI模式没有按照上面的例子关闭。 但是通过live()
调用,它们都按预期工作。
这是我第一次也是唯一一次看到on()的行为与不推荐使用或'卷起'事件绑定API(委托,实时,绑定)之间的差异。
我没有回复使用live()
或delegate()
但想了解为什么会发生这种情况,如果可能的话!
关心SB
$(foo).live(type, handler)
等价于$(document).on(type, foo, handler)
,所以请尝试以下代码;
$(function () {
$(document).on("click", '#thelink', function (e) {
e.preventDefault();
$("#jquery-ui-dialog-box").dialog("close");
});
});
live()
的签名令人困惑; 你实际上并没有将处理程序绑定到所选元素,而是绑定到document
元素,该元素侦听要在与给定选择器匹配的元素上触发的事件( jQuery .live()如何工作? )。
$(foo).live(type, handler)
等价于$(document).delegate(foo, type, handler)
;
为了将来参考,只需交换第一个和第二个参数,就可以将$(foo).delegate(selector, type, handler)
转换为on()
; on()
首先要求事件类型,然后是(可选)选择器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.