Question

我已经实现了一个jquery模式弹出

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>

现在触发了按钮点击事件，但在完成我的过程后，模态弹出窗口将自动关闭。任何人都可以帮我解决这个问题。

Answer 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');
    });    
})

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

Answer 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>

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

2 个答案: