javascript - 升级后的 jQuery、.on() 和 document.ready 无法与 UpdatePanels 一起使用

Question

我在 StackOverflow 上看到了一些其他解决方案，但我特别好奇为什么它突然不起作用了。一些背景知识...我们仍在使用 jQuery 1.7.1，并且我们正在尝试修补不适用于较新版本 jQuery 的插件和页面。目前，我正在使用 1.8.3 进行测试。问题是这样的:

我在 UpdatePanel 中有一个网格，在 TemplateField 中有按钮。每个按钮都分配有一个类，单击时...会弹出一个模式。这在 1.7.1 下完美运行，我将 .live 事件放在 document.ready 中。升级到1.8.3，我摆脱了live()并使用on()，全部在document.ready中。

每当我在网格上翻页时，就会触发异步回发并且 .on() 会丢失。我所做的唯一更改是升级到 1.8.3。并将 live() 更改为 on()。这以前有效。为什么我突然不能这样做了。示例代码如下:

$(document).ready(function () {
            $("#AppDialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 400,
                width: 650,
                modal: true,
                resizable: false }
            });

            $(".AppEdit").on("click", function (e) {
                e.preventDefault();
                $("#AppDialog").dialog('open');
            });
});

按钮位于 UpdatePanel 网格中的 TemplateField 内:

<asp:Button ID="btnEdit" runat="server" Text="Edit" CommandName="EditApp" CssClass="AppEdit" />

有什么想法吗？我不想使用 pageLoad，那么我最好的选择是什么？

Answer 1

.live() 和 .on() 之间的区别在于 .live() 将应用于所有元素(包括将来通过 ajax 添加的元素)，而 .on() 只应用于当前在 DOM 中的元素.

$(document).on('click', '.AppEdit', function() {});

它的作用是为文档对象设置一个事件处理程序，每当事件冒泡并被捕获时，它就会检查 eventObject.target 是否具有 AppEdit 类，如果是，则执行您的函数。