Jquery: dialog box only shows once per click

Question

Hello, I have a series of "links & divs" like these:

<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>

...

I'm using the following javascript, and it works very nice except the fact that I can open the dialog only once per click

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

I read somewhere that I have to use the "autoOpen: false" feature, but I have no idea on where to put this...

Please, can you help? Thanks

Answer 1

Tested, and works: http://jsbin.com/ikate

I separated the initialization of the dialog from the click event of the links. The click event merely finds its corresponding dialog, and opens it.

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

});

Answer 2

Maybe you should look at This question on SO. It looks very similar

Answer 3

Building upon what Jonathan did and using something a little closer to your original click function, this should do the trick.

$(function(){

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

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

});

By declaring the dialog earlier and with autoOpen:false we're setting it up but not displaying the dialog. You can then call dialog('open') on the element with the dialog functionality and have it open.