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

2019年7月21日 162次阅读

我使它工作但问题是它只工作一次.弹出窗口出现后,链接不起作用,弹出窗口不再显示.我必须刷新才能看到这种情况正在发生.我得到了这个
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>

最佳答案 对话框类有很多元素,所以当你调用时

$('.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中得到错误,因为你只有一个div在那里有班.dialog.

点赞