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() 来完成，而在 native 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');
  });
});