单击按钮时ajax弹出窗口未显示

Question

我正在使用下面的代码尝试创建一个显示文本和几个按钮的弹出窗口。问题是，当单击按钮时，弹出窗口不会显示，页面会重新加载。

<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">
$(function () {
$("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
</script>

<asp:Button ID="button1" ClientId="button1" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
    </div>

Answer 1

1. 您还需要包含jQuery js（您只显示jQuery UI脚本）。把它放在jQueryUI之前
2. 您可以设置ClientIDMode =＆＃34;静态＆＃34; ASP.net属性，以便ID保持不变。有几个选项：http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx
3. 您需要将jQuery代码包装在DOM就绪处理程序中，因为它位于页面上的元素之前。 $(function(){YOUR CODE HERE});是$(document).ready(function(){YOUR CODE HERE});
的捷径

代码：

<script src="your jQuery.js path here" type="text/javascript"></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">
    $(function(){
        $("#button1").live("click", function () {
            $("#popup").dialog({
                title: "Display",
                width: 600,
            })
            return false;
        });
    });
</script>

<asp:Button ID="button1" ClientIDMode="Static" runat="server" Text="testpopuo" />
<div>
<div id="popup" style="display:none">
    <asp:Literal Text="Are you sure you want to delete the blog?"  runat="server"/>
    <asp:Button Text="Yes" runat="server" />
</div>
</div>

点击时看起来像这样：

Answer 2

您在加载按钮之前使用查询选择器。所以在jquery ready函数下编写代码。

$( document ).ready(function() {
    $("#button1").live("click", function () {
        $("#popup").dialog({
            title: "Display",
            width: 600,
        })
        return false;
    });
});