jquery和asp.net更新面板冲突答案

【问题标题】：jquery and asp.net update panel conflictjquery和asp.net更新面板冲突
【发布时间】：2011-07-10 19:13:31
【问题描述】：

我在更新面板中有一个文本框，在单击按钮时会调用它，这是由 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() 但它仍然不起作用。

什么问题，谢谢。

【问题讨论】：

标签： jquery asp.net updatepanel

【解决方案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()方法。

【讨论】：

它现在可以工作了，但是有点滞后。我的意思是在模糊之后我必须等待一段时间，然后单击两次才能使切换起作用。所以我只是将模糊链接到切换，现在它工作正常。谢谢

【解决方案2】：

尝试使用live()：

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

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

【讨论】：