使用jQuery on()链接click事件不会通过Ajax调用在注入的HTML上触发 [英] Wiring up click event using jQuery on() doesn't fire on injected HTML via Ajax call

问题描述

我有一个局部视图，该视图是通过Ajax调用返回的，其数据类型为html-在此html内是一个带有ID的锚标记，我正在使用jQuery的.on() API和1.7版连接click事件.框架1.

I have a partial view which is returned via an Ajax call with a dataType of html - inside this html is an anchor tag with an id, which I am wiring up a click event using jQuery's .on() API and version 1.7.1 of the framework.

为简便起见，假设部分视图如下:

For brevity's sake, imagine the partial view is as follows:

<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控制器操作，该操作将以上内容作为部分视图结果返回，我将其截取并吐入了模式对话框.

..and via a standard $.ajax POST to an MVC controller action which returns the above as a partial view result, which I intercept and spit into the modal dialog.

我尝试连接的事件代码如下:

The event code that I'm attempting to hook up looks as follows:

$(function () {
    $("#thelink").on("click", function (e) {
        e.preventDefault();
        $("#jquery-ui-dialog-box").dialog("close");
    });
});

现在，如果我将on()切换为live()-一切都会按预期进行.尽管在IE8(IE8标准模式)下使用上面的代码，该事件不会触发-未命中断点，按照上面的示例，jQuery UI模式不会关闭.不过，通过live()调用，一切都可以按预期进行.

Now, if I switch the on() to live() - everything works as expected. With the code above though in IE8 (IE8 Standards mode) the event does not fire - breakpoints are not hit, the jQuery UI modal doesn't close as per the example above. With a live() call though, it all works as expected.

这是我第一次也是唯一一次看到on()的行为与已弃用或汇总"事件绑定API(委托，活动，绑定)之间的区别

This is the first and only time I've ever seen a differential between the behaviour of on() and the deprecated or 'rolled up' event binding API (delegate, live, bind)

在恢复使用live()或delegate()时没有问题，但想了解为什么会发生这种情况，

I have no issues with reverting to using live() or delegate() but would like to understand why this is occurring, if that is possible!

问候 SB

推荐答案

$(foo).live(type, handler)等同于$(document).on(type, foo, handler)，因此请尝试以下操作；

$(foo).live(type, handler) is equivalent to $(document).on(type, foo, handler), so try the following instead;

$(function () {
    $(document).on("click", '#thelink', function (e) {
        e.preventDefault();
        $("#jquery-ui-dialog-box").dialog("close");
    });
});

live()的签名令人困惑；您实际上不是将处理程序绑定到所选元素，而是绑定到document元素，该元素侦听要在与给定选择器匹配的元素上触发的事件(

The signature of live() is confusing; you're not actually binding a handler to the selected elements, but to the document element, which listens for an event to be fired on an element which matches the given selector ( How does jQuery .live() work? ).

$(foo).live(type, handler)等同于$(document).delegate(foo, type, handler);

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

For future reference, $(foo).delegate(selector, type, handler) can be converted to on() just by swapping the first and second parameters; on() expects the event type first, then the (optional) selector.

这篇关于使用jQuery on()链接click事件不会通过Ajax调用在注入的HTML上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！