2012-09-27 75 views
0

为什么只触发第一个按钮onclick?我2人不会触发任何事件,当我在控制台中点击它们,也没有错误 我有:jquery按钮单击触发器只能用第一个按钮工作

<script> 
$(document).ready(function(){ 

      var name_of_sender =""; 
      var text_of_sender =""; 

      var $dialog = $('<div></div>') 
      .html('This dialog will show every time!') 
      .dialog({ 
       autoOpen: false, 
       title: 'Basic Dialog' 
      }); 



      $("#edit_text").click(function() { 

       var butName = $(this).attr("name"); 
       var user_id = butName.split("_")[1]; 
       alert(user_id); 
       name_of_sender = $('#username_'+user_id).html(); 
       text_of_sender = $('#text_'+user_id).html(); 

       alert(name_of_sender); 
       alert(text_of_sender); 

       $dialog.dialog('open'); 
       // prevent the default action, e.g., following a link 
       return false; 
      }); 
}); 
</script> 
<table> 
<tbody> 
<tr> 
    <td id="username_33">test</td> 
    <td id="text_33">asdasdasd</td> 
    <td>2012-09-27</td> 
    <td>217.xx.xx.6</td> 
    <td> 
    <button id="edit_text" name="id_33">Edit</button> 
    </td> 
</tr> 
<tr> 
    <td id="username_34">test</td> 
    <td id="text_34">asdasdasd</td> 
    <td>2012-09-27</td> 
    <td>217.xx.xx.6</td> 
    <td> 
    <button id="edit_text" name="id_34">Edit</button> 
    </td> 
</tr> 
<tr> 
    <td id="username_35">test</td> 
    <td id="text_34">asdasdasd</td> 
    <td>2012-09-27</td> 
    <td>217.xx.xx.6</td> 
    <td> 
    <button id="edit_text" name="id_35">Edit</button> 
    </td> 
</tr> 
</tbody> 
</table> 
+0

你的HTML是无效的,因为你用同样的'id'不止一次。这也是为什么jQuery不能选择比第一个实例更多的原因。 – Sparky

回答

6

的ID应该是唯一的..使用ID选择 - 它只会选择第一个找到的元素与ID - 因此,事件处理只绑定的第一个按钮 为了您的代码,你可以将其更改为

$("button[name^=id_]").click(function() { 

或更改ID的上课和使用类选择

1

你应该有唯一的ID对于元素,你可以使用名字与通配符点击所有按钮

$("input[type=button][id^=id_").click(function() { 

      var butName = $(this).attr("name"); 
      var user_id = butName.split("_")[1]; 
      alert(user_id); 
      name_of_sender = $('#username_'+user_id).html(); 
      text_of_sender = $('#text_'+user_id).html(); 

      alert(name_of_sender); 
      alert(text_of_sender); 

      $dialog.dialog('open'); 
      // prevent the default action, e.g., following a link 
      return false; 
     }); 
0

好吧,上面的例子似乎适用于某些人,但没有为我工作。命名编辑

这种方式非常按钮的工作原理是相同的:

$('#Edit').live('click', function() { 

});