Javascript dialog()函数在我的MVC代码中不工作

这是我的JS代码

      $(function () {
               $(".button").live("click", function () {
        alert("Dialog page function is working!");
        $(".dialog").dialog("open");
    });
        $(".dialog").dialog({
            buttons: {
                "Ok": function () {
                    $(this).dialog("close");
                }
            }
        });
});

<td>
    <input type="button" value="Add Value" class="button" />
</td>

我编辑了我的代码。我已经在旁边的按钮报警框。当我点击按钮时，我能够得到警告框，但对话框不工作

您嵌套了两个document.ready函数。试试这样:

$(function () {
    $(".button").live("click", function () {
        $(".dialog").dialog("open");
    });
    $(".dialog").dialog({ 
        autoOpen: false,
        buttons: { 
            "Ok": function () { 
                $(this).dialog("close"); 
            } 
        } 
    });
});

演示。

更新:

在大量的评论之后，看起来在ASP中设置这个仍然存在问题。NET MVC应用程序。所以这里有一个一步一步的指南来获得一个工作的解决方案:

创建一个新的ASP。. NET MVC 2应用

将Index.aspx视图内容替换为以下内容:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        $(function () {
            $('.button').live('click', function () {
                $('.dialog').dialog('open');
            });
            $('.dialog').dialog({
                autoOpen: false,
                buttons: {
                    'Ok': function () {
                        $(this).dialog('close');
                    }
                }
            });
        });
    </script>
</head>
<body>
    <input type="button" value="Add Value" class="button" /> 
    <div class="dialog"> 
        sadffasdf
    </div> 
</body>
</html>

运行应用
点击添加值按钮

相关内容

最新更新

热门标签：