jquery and asp.net update panel conflict

i have a text-box within an update panel that is called on a button click, and this is done by jquery but becuase the text-box has an ontextchanged event开发者_高级运维 i added to the update-panel and the jquery doesn't only works one time after that it stopped.

here is my aspx code:

<asp:UpdatePanel ID="up2" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="notepad" runat="server" AutoPostBack="true" OnTextChanged="insNotes"  
                    TextMode="MultiLine" CssClass="notepad"  />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="notepad" EventName="TextChanged" />
            </Triggers>
        </asp:UpdatePanel>

and here is my jquery:

$(function () {
$("#padToggle").toggle(function (pad) {
    $(".notepad").css("z-index", "4").animate({ top: "5px" }, 1000);
    $("#padToggle").css("z-index", "4").animate({ top: "5px" }, 1000);
    $(".notepad").focus();
}, function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
});
$(".notepad").blur(function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

});

i tried to add a pageLoad() Ajax function but still didn't work, also tried to bind() and unbind() but it still didn't work.

what is the problem , thanks.

The reason why this might happen is because once you use the UpdatePanel it refreshes the textbox from the DOM which removes all events you have associated with it. One possibility is to use the .live() method to subscribe for events with this textbox.

For example instead of:

$(".notepad").blur(function (pad) {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

you could try this:

$('.notepad').live('blur', function (pad) {
    $('.notepad').animate({ top: "95%" }, 1000);
    $('#padToggle').animate({ top: "92.5%" }, 1000);
    $('.notepad').blur();
});

In fact the .delegate() method is recommended to be used compared to .live().

Try using live():

$(".notepad").live ('blur', function () {
    $(".notepad").animate({ top: "95%" }, 1000);
    $("#padToggle").animate({ top: "92.5%" }, 1000);
    $(".notepad").blur();
});

This will trigger the event handler for lost focus of the existing notepad element, as well as any created (via update panel refresh) in the future.