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");
 });

Answer 2

id属性必须是唯一的。如果您正在考虑使用#popup_button { }在CSS中设置样式，并且对于使用class的多个元素，请使用此dot上的.popup_button { }和JavaScript尝试此操作：

<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");
});

Answer 3

id必须是唯一的，所以使用class属性必须工作有趣：

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

js是：

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

Answer 4

ID是什么意思。

ID应该是唯一的。使用class来管理这类工作。

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

Answer 5

您的ID属性应该是唯一的。 JQuery只是选择具有该ID的第一个元素。如果要基于公共属性选择多个元素，请提供class属性。 e.g。

<div class='popup' />
<div class='popup' />

JQuery选择：

$(".popup").click(function() { alert('hello'); });

我想你会做你想做的事。

Answer 6

你的方式错了。相同的ID必须使用class。这不是一个好方法。

jQuery onclick函数只在第一个<div>上工作，为什么？</div>

6 个答案: