.NET UpdatePanel + LiveQuery

Question

I have used LiveQuery to detect when an element is added to the page. The element is inside an .NET AJAX UpdatePanel. When the UpdatePanel is refreshed, live query does not detect the new element.

        <asp:UpdatePanel runat="server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="refresh" />
        </Triggers>
        <ContentTemplate>
            <a id="but1" href="#">Button 1</a> 
        </ContentTemplate>
    </asp:UpdatePanel>


 $('#but1').livequery(function(event) {
        alert('Button added');
    });

The alert only fires when the page is first loaded. Not when the udpatepanel is refreshed.

Answer 1

Live Query only sees your changes when they are made through the jQuery DOM manipulation mechanisms. In this answer to a similar question, I struggled with this problem and suggested a polling-based workaround.

Answer 2

try wrapping the jquery code inside pageLoad like this:

function pageLoad()
{
    $(document).ready(function () {
        $('[id$=but1]').livequery(function(event) {
            alert('Button added');
        });
    });
}

You will need to add the EnablePageMethods="true" inside your ScriptManager tag:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />