单击ASP.NET按钮时,jQuery".button"装饰会消失吗？

Question

从jquery UI,您现在可以应用于.button()锚点,按钮,提交按钮等.我有一个简单的asp.net按钮,如下所示:

<asp:Button ID="btnFindSearch" runat="server" Text="Search" 
                        onclick="btnFindSearch_Click" />

然而,它是一个更新面板,如下所示:

 <div id="dialog" title="Select Address">
        <asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
        <ContentTemplate>
            <div id="search" style="width:100%; text-align:center;">
                <asp:TextBox ID="txtFindSearch" runat="server"></asp:TextBox> 
                <asp:Button ID="btnFindSearch" runat="server" Text="Search" 
                    onclick="btnFindSearch_Click" />
            </div>
        </ContentTemplate>
        </asp:UpdatePanel>
        </div>

在我的jquery中,我可以做到:

$('#btnFindSearch').button();

它给了我一个按钮的jquery ui外观......真棒我想.但是,当我点击我的按钮时,该按钮返回到看起来很旧的asp.net服务器按钮.它似乎.button()不再适用.

这是因为它在UpdatePanel内部或可能导致这个???

Answer 1

这是因为在按钮上单击服务器发生PostBack并替换原始DOM元素.

UpdatePanel并不是特别聪明.它只是用服务器发送的新HTML 替换所有子内容(想想innerHTML = severStuff).因此,新创建的DOM元素"未装饰".在.button()魔术需要在新的DOM元素再次运行.

除非有更好的方法来处理这个,我不知道,这里是一个有用的类,用于自动处理不同场景的内联脚本块.这是一种kludge和"hackish",但它确实工作得很好(我们使用修改版本).

用法可能看起来像(这必须在 [updated] UpdatePanel中,因为它适用于部分PostBacks):

<UpdatePanel ...>
  <OtherControls ...>
  // Put other controls first, because this will be rendered in-order
  // (which should usually be last!) in a normal/full PostBack.
  // It will use the appropriate "RegisterScript" for partial PostBacks.
  <InlineScript runat="server">
    <script>
        // Add .button() stuff here - note that InlineScript is last
        // so the previous (control) DOM nodes exist already in current
        // browser implementations, even if there is no "DOM loaded" per-se...
        // -- or --
        jQuery(function ($) {
            // Add .button() stuff here; using $.ready here might (??)
            // actually cause the browser to update the UI first...
            // ...but it will guarantee the DOM is completely loaded.
        })
    </script>
  </InlineScript>
</UpdatePanel>