Question

我在更新面板中有一个文本框，在按钮点击时调用，这是由jquery完成的，但是因为文本框中有一个ontextchanged事件我添加到更新面板和jquery不仅在停止后工作一次。

这是我的aspx代码：

<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>

这是我的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();
});

}）;

我尝试添加pageLoad() Ajax功能，但仍然无效，还尝试bind()和unbind()，但仍无效。

问题是什么，谢谢。

Answer 1

之所以会出现这种情况，是因为一旦您使用UpdatePanel，它就会刷新DOM中的文本框，从而删除与之关联的所有事件。一种可能性是使用.live()方法订阅此文本框中的事件。

例如，而不是：

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

你可以试试这个：

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

事实上，与.live()相比，建议使用.delegate()方法。

Answer 2

尝试使用live()：

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

这将触发现有记事本元素丢失焦点的事件处理程序，以及将来创建的任何内容（通过更新面板刷新）。

jquery和asp.net更新面板冲突

2 个答案: