Jquery: диалоговое окно отображается только один раз за клик

Question

У меня есть серия "links & divs", подобных этим:

<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 просто находит соответствующий диалог и открывает его.

$(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');    
    });
  });

});