4

onclick コマンドでダイアログ ボックスを開こうとしていますが、うまくいきません。私はすべてを試しましたが、それを機能させることができます。

ここでダイアログ jQuery:

<script type="text/javascript">
        $(function runDialog(){
            $('#testimonialOpen').dialog({
                autoOpen:false
                });
            })
    </script>

div id'd testimonialOpen があるので、要素を選択していることがわかります。autoOpen が削除されたときにダイアログ ボックスが機能しますが、次のように関数を呼び出そうとすると、次のようになります。

<p class="topper">Top words<a onClick="runDialog()"><img id="readMore" style="display: inline; padding-left:40px;" src="../images/content/readMore.png"/></a></p>

それは何もしません。jQueryで「open」コマンドを使用しようとしましたが、それでも何もしません。アイデアはありますか?

4

2 に答える 2

19

まず、document.ready ハンドラーが正しい構文を使用していません。現在、jQuery オブジェクト内に関数宣言を配置しています。

onclick次に、jQuery を使用している場合は、古い属性ではなく、jQuery を使用してイベントを添付する必要があります。目立たないイベント ハンドラーを優先して、可能な場合は後者を避ける必要があります。jQuery では、これは を使用して行われon()、ネイティブ JS ではaddEventListener().

これを試して：

<p class="topper">
  Top words
  <a href="#">
    <img id="readMore" style="display: inline; padding-left: 40px;" src="../images/content/readMore.png"/>
  </a>
</p>

$(function() {
  $('#testimonialOpen').dialog({
    autoOpen: false
  });

  $(".topper a").on('click', function(e) {
    e.preventDefault();
    $('#testimonialOpen').dialog('open');
  });
});
于 2012-04-11T13:38:25.170 に答える
7

このコードを試してください

 $(function() {
  $("#ok_link").click(function(e) {
        e.preventDefault();
        $('#dialog-confirm').dialog('open');
    });

  $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:160,
      modal: true,
      minWidth: 400,
      autoOpen:false,
      buttons: {
        "OK": function() {
          location.href="index.html";
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  });
body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: 62.5%;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<a href="index.html" id="ok_link">OK</a>

<div id="dialog-confirm" title="Are you sure to go home?">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You are about to redirect to home page. Are you sure?</p>
</div>

于 2015-03-12T11:52:38.060 に答える