javascript - jQuery 一个对话框有多个 "opener"按钮

Question

我有大约一百万个按钮试图从 jQuery UI 打开一个对话框。 页面上的第一个按钮可以很好地打开对话框，但是页面上的其他每个按钮都没有执行任何操作，它们都有相同的 id，我只是使用网站上的基本对话框脚本(我对很多东西都很陌生)所有 JS)。

这是代码；

<td style="height:15px"><input type="button" id="opener" value="Edit" onClick="currentroom( 0,0 )"></td>

这是其中一个按钮的示例。

<div id="dialog" title="Set Room Type">
<a onClick="changeroomblank()"><img src="img/blank.png" alt="No room" width="32" height="32"></a>

这是对话框 div 的开始

最后。

<script>

$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

</script>

所以它几乎都是从网站复制和粘贴的，但在我寻求帮助的任何地方，我看到的都是如何在对话框上获取实际的按钮，而我不需要。

Answer 1

由于 id 是唯一的，因此您需要使用 class 来代替:

<td style="height:15px"><input type="button" class="opener" value="Edit" onClick="currentroom( 0,0 )">

那么你可以这样做:

$(function() {
    $("#dialog" ).dialog({ autoOpen: false });
    $(".opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});

此外，请记住将代码包装在 DOM 就绪处理程序中 $(function() {...}); 以确保在执行 javascript 之前正确添加所有 DOM 元素。