2

现在，您可以从 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 内还是可能导致这种情况的原因？？？

4

2 回答 2

6

这是因为在单击按钮时会发生服务器 PostBack，并且会替换原始 DOM 元素。

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

除非有更好的方法来处理这个，我不知道，这里有一个有用的类，用于自动处理不同场景的内联脚本块。这有点杂乱无章和“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>
于 2012-04-22T22:29:58.663 回答
3

这可以通过jQuery livequery插件来完成。

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

这是一个示例用法：

$("#btnFindSearch").livequery(function(){$(this).button();})
于 2012-04-22T22:53:30.717 回答