Jquery：每次单击只显示一次对话框

Question

我有一系列像这样的“链接＆amp; div”：

<a class="pop" href="popup.asp?PD=12>Hotel XXX</a>
<div class="details" title="Hotel XXX"></div>

<a class="pop" href="popup.asp?PD=52>Hotel YYY</a>
<div class="details" title="Hotel YYY"></div>

...

我正在使用以下javascript，除非每次点击只打开一次对话，否则它的效果非常好

$('.pop').click(function(event) {
event.preventDefault();
$(this).next('div.details').load($(this).attr('href')).dialog({
    modal: false,
    height: 400,
    width: 500
});
})

我在某处读到了我必须使用“autoOpen：false”功能，但我不知道在哪里放这个......

拜托，你能帮忙吗？ 感谢

Answer 1

在乔纳森所做的事情的基础上，并使用更接近原始点击功能的东西，这应该可以解决问题。

$(function(){

  $(".details").dialog({
    autoOpen:false
  });

  $('.pop').click(function(event) {
    event.preventDefault();
    $(this).next('div.details').html("").load($(this).attr('href')).dialog('open');
  })

});

通过先前声明对话框并使用autoOpen:false我们设置它但不显示对话框。然后，您可以使用对话框功能在元素上调用dialog('open')并将其打开。

Answer 2

经过测试，有效：http://jsbin.com/ikate

我将对话框的初始化与链接的click事件分开。 click事件只找到相应的对话框，然后打开它。

$(function(){

  $(".details").dialog({
    autoOpen:false
  });

  $("a.pop").each(function(i,o){
    $(this).click(function(e){
      e.preventDefault();
      $(".details:eq("+i+")").html("Dialog " + i).dialog('open');    
    });
  });

});