带有 asp.net 的 Jquery 对话框答案

【问题标题】：Jquery Dialog with asp.net带有 asp.net 的 Jquery 对话框
【发布时间】：2013-11-20 22:09:44
【问题描述】：

当我单击按钮显示消息时，我得到一个正常的 MessageBox，但是当我在 SCOND 时间调用 Jquery 对话框时，我得到两个 MessageBox！当我第三次调用 Jquery Dialog 时，我得到了三个 MessageBox！请帮帮我！

这是我的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id*=Call_Dialog]").click(function() {

                $("#MyDiv").dialog({
                    title: "jQuery Dialog Popup",
                    buttons: {
                        Close: function () {
                            $(this).dialog('close');
                        }
                    }
                });

                $("#ShowMessage").click(function () {
                    event.preventDefault();
                    alert('Hi');
                    $("#MyDiv").dialog('close');
                })
            })
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="MyDiv" style="display: none">

<asp:Button ID="ShowMessage" runat="server" Text="Button" /> 

    </div>



    </form>
    <p>
        <input id="Call_Dialog" type="button" value="button" /></p>
</body>
</html>

【问题讨论】：

您在$("[id*=Call_Dialog]").click() 事件中拥有.dialog() 和.click()。这是你的意思吗？
不，问题是当我调用 Jquery 对话框的 SCOND 时间我得到两个消息框！当我第三次调用 Jquery Dialog 时，我得到了三个 MessageBox！
这个问题与 ASP.NET 无关，你知道的。
@Lucy 已更新答案

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

谢谢，但是如何通过单击按钮调用对话框？

对话框应该只初始化一次，而不是每次点击某个东西并重新生成时

解决方案是在点击之外进行对话框初始化，然后你就完成了

$(document).ready(function () {

  $("#MyDiv").dialog({
                title: "jQuery Dialog Popup",
                buttons: {
                    Close: function () {
                        $(this).dialog('close');
                    }
                }
            });

 $("[id*=Call_Dialog]").click(function() {
   $("#ShowMessage").click(function () {
                event.preventDefault();
                alert('Hi');
                $("#MyDiv").dialog('close');
            })
        })
    });

打开 jquery 对话框：使用这个重载：

$("#MyDiv").dialog('open');

【讨论】：