jQuery UI 对话框 onClick 事件

Question

我正在尝试使用 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 中使用“打开”命令，但它仍然什么也没做，有什么想法吗？

Answer 1

首先，您的 document.ready 处理程序没有完全使用正确的语法 - 您当前正在将函数声明放置在 jQuery 对象中。

其次，如果您使用 jQuery，您应该使用它来附加您的事件，而不是过时的 onclick 属性。在可能的情况下应避免使用后者，而不是使用不显眼的事件处理程序。在 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');
  });
});

Answer 2

试试这个代码

 $(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>