Диалоговое окно jQuery UI открывается только один раз

Question

Каждое диалоговое окно открывается только один раз, после чего ничего не происходит. Я искал какое-то время, и здесь есть несколько ответов, но я их честно не понимаю. (Я довольно новичок в jQuery и пользовательском интерфейсе jQuery). Любая помощь, которую вы можете мне дать, будет отличной!

http://jsfiddle.net/bf44crt0/

$('.prdDetails').click(function() { 
     $(this).next('#prdDetails').dialog({ 
      draggable: false, 
      height: 100, 
      modal: true, 
      resizable: false, 
      width: 100 
     }); 
     return false; 
    }); 

Спасибо за ваше время!

Answer 1

Проблема заключается в том, что линии:

$(this).next('#prdDetails').dialog({ 

Диалог меняет свою позицию после того, как он открыт, поэтому он больше не next() на нож.

Вы должны идентифицировать диалоги с уникальнымиid.

HTML:

<a class="prdDetails" data-dialog="#d1">Dialog 1</a> 
<div id="d1" class="hidden">This Is Dialog 1</div> 

<a class="prdDetails" data-dialog="#d2">Dialog 2</a> 
<div id="d2" class="hidden">This Is Dialog 2</div> 

<a class="prdDetails" data-dialog="#d3">Dialog 3</a> 
<div id="d3" class="hidden">This Is Dialog 3</div> 

Сценарий:

$('.prdDetails').click(function(e) { 
    e.preventDefault(); 
    $($(this).data('dialog')).dialog({ 
     draggable: false, 
     height: 100, 
     modal: true, 
     resizable: false, 
     width: 100 
    }); 
}); 

JSFiddle (откройте консоль, чтобы получить представление, что происходит с диалогами, и почему вы не можете использовать next())