【问题标题】:An ASP.NET button click event is not firingASP.NET 按钮单击事件未触发
【发布时间】:2011-12-02 03:22:27
【问题描述】:

我在 div 中有一个按钮,默认情况下它是隐藏的,因为它被 jQuery UI 用作模式弹出窗口。

这个按钮的点击事件处理程序永远不会被调用,但是如果我将按钮代码复制到这个隐藏的 div 之外,那么它可以正常工作。我该如何解决这个问题?

这是我目前的代码:

<div id="dialog" title="Notify Users">
    <div style="width:100%; height:500px; overflow:auto;">
       <asp:Repeater runat="server"  ID="rptNotify">
          <HeaderTemplate>
             <table>
          </HeaderTemplate>
          <ItemTemplate>
             <tr>
                <td>
                   <asp:CheckBox ID="chkUser" runat="server" Checked='<%# Eval("Checked") %>' />
                </td>
                <td>
                   <asp:Label ID="lblUser" runat="server" Text='<%# Eval("FullName") %>'/>
                </td>
             </tr>
          </ItemTemplate>
          <FooterTemplate>
             </table>
          </FooterTemplate>
       </asp:Repeater>
    </div>
    <asp:Button ID="btnSaveNotifications" runat="server" Text="Save" OnClick="btnSaveNotifications_Click" />
 </div>

显示/隐藏此 div 的代码是:

<script>
     // Increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        $("#dialog").dialog({
           autoOpen: false,
           show: "blind",
           hide: "explode"
        });

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>

【问题讨论】:

  • div 是如何隐藏的? CSS 或其他可见性机制?
  • 我认为它是通过 Jquery 完成的,这是我从 Jquery 网站上复制的一个示例
  • 在问题中显示这一点可能很有用。
  • 如果你使用按钮的点击客户端事件并从那里转到服务器端呢?

标签: javascript jquery .net asp.net


【解决方案1】:

这里的问题是 jQuery-UI 在&lt;form&gt; 元素的outside 创建对话框,所以点击它永远不会提交表单。

要解决这个问题,您可以将对话框&lt;div&gt; 移回表单中,而不是手动创建点击事件。我快速搜索了一下,to this question 的答案已经涵盖了这个问题。

所以你只需要做出这个改变:

<script>
     // increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;

     $(function () {
        var dialog = $("#dialog").dialog({
                        autoOpen: false,
                        show: "blind",
                        hide: "explode"
                     });

        // Move the dialog back into the <form> element
        dialog.parent().appendTo(jQuery("form:first"));

        $("#opener").click(function () {
           $("#dialog").dialog("open");
           return false;
        });
     });
</script>

【讨论】:

  • 像魅力一样工作。感谢您分享知识。
  • 我看到的唯一问题(就我而言)是对话框不是模态窗口,您可以单击表单中的任意位置。
【解决方案2】:

转机是将您的按钮事件更改为客户端事件,然后从客户端触发服务器端事件。

查看堆栈溢出问题How to fire a button click event from JavaScript in ASP.NET

【讨论】:

    【解决方案3】:

    请注意,在对话框中使用 iFrame 时会产生影响。移动带有 iFrame 的 div 会导致该 iFrame 发布两次或更多。如果您已经实现了这一点,我会检查您的情况是否属实。我已经发布了一个我在这里找到的解决方法:https://*.com/a/24663205/3334255

    【讨论】: