1

当我单击按钮时，Jquery 对话框没有打开有什么问题？

下面你可以看到一个简单的问题代码。

代码：

@model IEnumerable<TPTMVC.Models.User>
@using TPTMVC.Models;    
@{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(document).ready
    (
        function () 
        {               
            $("#opener").click(function () {
                $("#dialog100").dialog("open");<--Not opening
            });
            $("#dialog100").dialog({ autoOpen: false });  
        }
    );   
</script>
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>

结果：

在此处输入图像描述

我正在使用带有 C# 的实体框架。

更新

$(document).ready(function () {        
        $('#opener').click(function () {
            alert("Click");//It's show
            $('#dialog100').dialog('open');
            return false;
        });
        $('#dialog100').dialog({ autoOpen: false });//After
    });

在这种情况下，警报工作

$(document).ready(function () {
        $('#dialog100').dialog({ autoOpen: false });//Before
        $('#opener').click(function () {
            alert("Click");//it's not show
            $('#dialog100').dialog('open');
            return false;
        });
    });

在这不是。

解决方案：

  @section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#dialog100').dialog({ autoOpen: false });
        $('#opener').click(function () {
            alert("Bum");
            $('#dialog100').dialog('open');
            return false;
        });
    }); 

</script>
}

它缺少@section 脚本

谢谢你的帮助！

4

2 回答 2

1

try $('#dialog100').dialog('open');

or...

$(document).ready(function () { 
    $('#dialog100').dialog({ autoOpen: false });
    $('#opener').click(function () {
        $('#dialog100').dialog('open');
        return false;
    });
});

EDIT: based on comments

Use Chrome, hit F12, and check resources to make sure you're loading them...

enter image description here

Your screen should look like this, only the button displayed...

enter image description here

The click event should then show the dialog...

enter image description here

Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...

Layout.cshtml

@RenderSection("scripts", required: false)

view.cshtml

@section Scripts { ..jquery scripts..}
于 2013-11-01T13:26:34.853 回答
0

您的对话设置似乎发生在点击事件中，因此设置不正确。它需要在点击事件之外发生。

这是一个工作示例...

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Animation</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>


</body>
</html>
于 2013-11-01T13:46:19.927 回答