使用jQuery on（）连接click事件不'；t通过Ajax调用激发注入的HTML

我有一个部分视图，它是通过一个数据类型为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>

$(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（）

的签名令人困惑；实际上，您并没有将处理程序绑定到所选元素，而是绑定到

文档

元素，该元素侦听在与给定选择器（）匹配的元素上激发的事件

$（foo）.live（type，handler）

相当于

$（document）.delegate（foo，type，handler）

---

为了便于将来参考，

$（foo）.delegate（选择器、类型、处理程序）

只需交换第一个和第二个参数即可转换为

on（）

on（）

首先需要事件类型，然后是（可选）选择器。

+1-完美-我盲目地（错误地）假设事件连接的“签名”是相同的，但事实并非如此。集成您的建议适用于我的实际代码。干杯。@Matt如果应用程序有许多屏幕和导航，并且我们将许多单击处理程序绑定到$（文档），那么性能可能会受到影响。是吗？@Samba：虽然正确，但在你注意到性能下降之前，你谈论的是很多很多很多。不要忘记，您可以使用

delegate（）

或

on（）

附加到更靠近目标元素的元素，而不是附加到

文档

@Matt感谢您的回复。但是$（container）的问题在于，如果容器是通过Ajax响应动态添加到DOM中的，那么它就不起作用了，因此必须使用document。@Matt如果您能对一种方法进行评论，那将是非常有帮助的，我正想这样做