jQuery onclick 函数仅适用于第一个 ，为什么？

Question

我有 html 表，在每个 tr 行的表内我有下一个代码:

<table>
   <tr><td> <div id="popup_button">Save</div> </td></tr>
   <tr><td> <div id="popup_button">Save</div> </td></tr>
   <tr><td> <div id="popup_button">Save</div> </td></tr>
   <tr><td> <div id="popup_button">Save</div> </td></tr>
</table>

js函数是:

$("#popup_button").click(function(){
    alert("HELLO");
});

问题是，当我单击 #1 行 div 时，它可以工作，但是当我尝试单击所有其他行时，它不起作用，并且再次只有表中的 #1 行 div 可以工作，为什么会这样？

Answer 1

id 属性应该是唯一的，如果您使用类它就可以工作。

 <table>
 <tr><td> <div class="popup_button">Save</div> </td></tr>
 <tr><td> <div class="popup_button">Save</div> </td></tr>
 <tr><td> <div class="popup_button">Save</div> </td></tr>
 <tr><td> <div class="popup_button">Save</div> </td></tr>
 </table>

 $(".popup_button").click(function(){
  alert("HELLO");
 });