Jquery UI 对话框不工作

Question

这是我的代码。如果我只使用一个对话框，那么它可以正常工作，多个不工作。请帮我解决这个问题。

  $(document).ready(function() {
	  
	$('#bouncer-1').click(function(){
    $( "#xyz" ).dialog();
	});

    $('#bouncer-2').click(function(){
    $( "#zyx" ).dialog();
	});
	
  });

<div id="stage">
<div id="traveler-1">
<div id="bouncer-1"></div>
</div>
<div id="traveler-2">
<div id="bouncer-2"></div>
</div>
</div>
<div id="xyz" title="Hello">
Hello Im xyz..
</div>
<div id="zyx" title="Hello">
Hello,Im zyx..
</div>

Answer 1

元素ID 应该是唯一的，这就是为什么它的名字是ID。将IDs 更改为不同的，如下所示：

你好我xyz.. 你好，我是zyx..

  $(document).ready(function() {
	  
	$('#bouncer-1').click(function(){
    $( "#xyz1" ).dialog();
	});

    $('#bouncer-2').click(function(){
    $( "#zyx2" ).dialog();
	});
	
  });

<div id="stage">
<div id="traveler-1">
<div id="bouncer-1"></div>
</div>
<div id="traveler-2">
<div id="bouncer-2"></div>
</div>
</div>
<div id="xyz1" title="Hello">
Hello Im xyz..
</div>
<div id="zyx2" title="Hello">
Hello,Im zyx..
</div>