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

試す$('#dialog100').dialog('open');

また...

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

編集：コメントに基づく

Chrome を使用し、F12 キーを押し、リソースをチェックして、それらが読み込まれていることを確認します...

ここに画像の説明を入力

画面は次のようになります。ボタンのみが表示されます...

ここに画像の説明を入力

クリックイベントはダイアログを表示する必要があります...

ここに画像の説明を入力

このビューは でラップされてい_layoutますか? もしそうなら、あなたは欠落していsectionます。通常、_layout ファイルにはスクリプト セクションがあり、ビューのこのスクリプト セクションに JS コードを配置する必要があります...

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 に答える