升级的jQuery，.on（）和document.ready不能与UpdatePanels一起使用

Question

I've seen some of the other solutions here on StackOverflow, but I'm particularly curious as to why this isn't working all of the sudden. A little background... we are still using jQuery 1.7.1, and we are attempting to patch up plugins and pages that do not work with the newer version of jQuery. At the moment, I'm testing with 1.8.3. Here's the issue:

I have a grid in an UpdatePanel with buttons in a TemplateField. Each button has a class assigned to it, and when clicked... pops up a modal. This worked perfectly under 1.7.1 where I put the .live event in the document.ready. Upgrading to 1.8.3, I got rid of live() and use on(), all in the document.ready.

Whenever I page on the grid, an async postback fires and the .on() is lost. The only change I made was upgrading to 1.8.3. and changing live() to on(). This previously worked. Why all of the sudden can I not do this. Example code below:

$(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');
            });
});

Button is inside a TemplateField in a grid that is in an UpdatePanel:

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

Any ideas why this would be? I don't want to use pageLoad, so what is my best option here?

Answer 1

The difference between .live() and .on() is that .live() will apply to all elements (including those added in the future with ajax), whereas .on() only applies to elements currently in the DOM.

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

What this does is set an event handler to the document object and whenever an event bubbles up and is caught, it will check whether the eventObject.target has the class of AppEdit, and if so, execute your function.