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元素“未装饰”。需要在新的DOM元素上再次运行.button()魔法。

除非有更好的方法来解决这个问题，我不知道，这里有helpful class for inline script blocks自动处理不同的场景。它有点像kludge和“hackish”，但它确实运行得很好（我们使用修改版本）。

用法可能看起来像（这里面必须 [更新] 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>

Answer 2

可以使用jQuery livequery plugin完成此操作。

它可以用来定义当前在dom中的所有元素的函数以及稍后添加的元素的函数。这将解决你的大部分问题。

以下是一个示例用法：

$("#btnFindSearch").livequery(function(){$(this).button();})

单击ASP.NET按钮时，jQuery“.button”装饰会消失吗？

2 个答案: