在 jquery 模式弹出窗口中未触发按钮单击事件答案

【问题标题】：Button click event not fired in jquery modal popup在 jquery 模式弹出窗口中未触发按钮单击事件
【发布时间】：2014-10-03 09:46:23
【问题描述】：

我已经实现了一个 jquery modal popup

Jquery 代码：-

<script type="text/javascript">
    $(function(){
     $('#<%=a2.ClientID %>').click(function(){
     $('#modelPopup').dialog({
     title: "Add New Server",
     width:650,
     height:450,
     modal:true,
     buttons:{
      Close:function(){
      $(this).dialog('close');
      }
     }
     });
    });    
    })
    </script>

HTML:-

<asp:Button ID="btnAddNewServic" Text="Add Service" runat="server" 
 CssClass="btnSmall_bg_green" Height="26px" Width="98px" OnClick="btnAddNewServic_Click" />

代码隐藏：-

 protected void btnAddNewServic_Click(object sender, EventArgs e)
        {
            int rowCount = 0;
            rowCount = Convert.ToInt32(Session["clicks"]);
            rowCount++;

            Session["clicks"] = rowCount;
            for (int i = 0; i < rowCount; i++)
            {
                TextBox txtServerU = new TextBox();
                Label lblU = new Label();

                txtServerU.ID = "txtServerU" + i.ToString();
                lblU.ID = "lblU" + i.ToString();

                lblU.Text = "Service" + (i + 1).ToString() + ":";

                panelnewserver.Controls.Add(lblU);
                panelnewserver.Controls.Add(txtServerU);

            }
        }

我无法找到此代码的问题。谁能帮我触发这个按钮点击事件。提前致谢。

更新：-

JQuery 代码：-

$(function(){
     $('#<%=a2.ClientID %>').click(function(){
     var $dialog= $('#modelPopup').dialog({
     autoopen:false,     
     title: "Add New Server",
     width:650,
     height:450,
     modal:true,        
     buttons:{
      Close:function(){
      $(this).dialog('close');
      }
     }     
     });
      $dialog.parent().appendTo($("form:first"));
      return false;
    });    
    })
    </script>

现在按钮单击事件被触发，但在完成我的过程后，模式弹出窗口将自动关闭。谁能帮我解决这个问题。

【问题讨论】：

首先我建议更改 $(function() {});成为 $(document().ready(function()});
你在 FireBug 中检查过，点击事件真的触发了吗？
@andrey.shedko $(function(){}) 非常好用，只是放置 $(document).ready(function() 的更短方式
它并不总是完美无缺，因为这可能与页面生命周期有关。
@andrey.shedko 你错了。如果您不相信我，请阅读 jQuery api.jquery.com/ready

标签： javascript c# jquery asp.net

【解决方案1】：

从记忆中我相信 jQuery UI 对话框在显示它们时实际上会将对话框元素从其在 DOM 中的位置中移除。因为这会导致您的btnAddNewServic 被移出form，所以您的回发将不会被正确触发。

所以这样的事情可能对你的 JavaScript 有用：

$(function(){
    var $dialog = $('#modelPopup');

    $dialog.dialog({
        autoOpen: false,
        title: "Add New Server",
        width:650,
        height:450,
        modal:true,
        buttons:{
            Close:function(){
                $(this).dialog('close');
            }
        }
    });

    $dialog.parent().appendTo($("form:first"));

    $('#<%=a2.ClientID %>').click(function(){
        $dialog.dialog('open');
    });    
})

这将在创建对话框后将其添加回表单中，因此您的回发现在应该运行。

【讨论】：

@dinesh.k 试试这个版本。
它适用于我的逻辑，但有一个问题......我在模态弹出窗口后面使用了一种黑色背景，背景会隐藏我的弹出窗口......

【解决方案2】：

根据the documentation，按钮应该在一个数组中。

<script type="text/javascript">
    $(function(){
        $('#<%=a2.ClientID %>').click(function(){
            $('#modelPopup').dialog({
                title: "Add New Server",
                width:650,
                height:450,
                modal:true,
                buttons: [
                    {
                        text: "Close",
                        click: function(){
                            $(this).dialog('close');
                        }
                    }
                ]
            });
        });    
    })
</script>

【讨论】：

他的点击事件没有触发。我猜button array 的重点会在那之后出现？
事件在按钮数组中。所以，可能是因为这个。