Question

我有一个局部视图，它通过一个带有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

Answer 1

$(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元素，该元素侦听要在与给定选择器（How does jQuery .live() work?）匹配的元素上触发的事件。

$(foo).live(type, handler)相当于$(document).delegate(foo, type, handler);

为了将来参考，只需交换第一个和第二个参数即可将$(foo).delegate(selector, type, handler)转换为on(); on()期望事件类型首先，然后是（可选）选择器。

使用jQuery on（）连接click事件不会通过Ajax调用触发注入的HTML

1 个答案: