jquery - 如何使 jQuery 对话框使用超链接文本而不是按钮？

Question

我让它工作了，但问题是它只能工作一次。一旦出现弹出窗口，链接就不起作用，并且弹出窗口不会再次显示。我必须刷新才能看到正在发生的事情。我得到了这个http://jsfiddle.net/pjVcR/2/它在 jsfiddle 内部工作，但在我的网站上不起作用。我的网站链接在这里:MY SITE

这是代码:

  <div class="content">
  <h4><a href="#" >AAAA</a></h4><img src="AAAA.jpg" />
    <div class="dialog" title="AAAA" >text AAAA
    </div>
  </div>

  <div class="content">
  <h4><a href="#" >BBBB</a><br></h4><br><img src="BBBB.jpg" />
    <div class="dialog" title="BBBB" >text
    </div>
  </div>

以及 html 中给出的脚本:

<script>
$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $('.dialog').dialog('destroy');
    }
  });
});
</script>

Answer 1

您有许多带有 dialog 类的元素，因此当您调用时

$('.dialog').dialog('destroy');

您正在销毁尚不存在的对话框，因此出现异常:

cannot call methods on dialog prior to initialization; attempted to call method 'destroy'

在 close 处理程序(即特定的 .dialog 元素)内使用 $(this) 的本地实例，以便 jQuery 知道要销毁哪一个。

$("a").click(function(event) {
  $(this).parent().parent().children(".dialog").dialog({
    close: function( event, ui ) {
      $(this).dialog('destroy');
    }
  });
});

http://jsfiddle.net/pjVcR/3/

请注意，如果您将代码更改为使用 .dialog 而不是 $(this)，您仍然会在页面中遇到相同的错误，这就是为什么您不会在 jsFiddle 中收到错误，因为您只有一个带有 .dialog 类的 div。