Question

设定：

当我点击table_1中的一行时，我编写了一个jQuery函数来更新table_2的表格单元格。这是我写的：

    <script type="text/javascript">
        $("tr").live('click',function() {
            var host = $(this);
            alert('A row in table 1 is clicked!');

            var count = host.find("td").eq(2).text();
            $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
            $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
        });
    </script>

问题：

当我使用FireBug逐步执行此功能时，我可以看到myTable_2中的单元格数据正在被更改。但是，对于每次单击，该功能都会执行两次。每次点击我都会看到警告框出现两次。

有人可以告诉我为什么会这样吗？以及如何避免这种情况？

Answer 1

只是简单地避免点击的传播

$("tr").live('click',function() {

        ...

        $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
    });

Answer 2

以下任一项：

单击的行位于另一行内（单击两行）。（example）
您展示的代码执行了两次（example）。

要解决此问题，请使您的选择器更具体。如果您使用的是jQuery 1.7+，请使用.on代替live：http://jsfiddle.net/6UmpY/3/

$(document).on("click", "#myTable_1 > tbody > tr", function() {
    // This selector will only match direct rows of the myTable_1 table

注意：使用.on代替live并未解决问题使用更具体的选择器解决问题如果您喜欢live，则以下内容也适用：http://jsfiddle.net/6UmpY/4/

$("#myTable_1 > tbody > tr").live("click", function() {

Answer 3

假设table_1是第一个表的id。

$("#table_1 tbody").on('click','tr', function() {
            var host = $(this);
            alert('A row in table 1 is clicked!');

            var count = host.find("td").eq(2).text();
            $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
            $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
        });

注意： live()已弃用，请按上述说明。你执行两次代码，因为tr选择器属于两个表，事件绑定两次。

您还可以使用delegate()：

$("#table_1 tbody").delegate("tr", "click", function(){
     var host = $(this);
     alert('A row in table 1 is clicked!');
     var count = host.find("td").eq(2).text();
     $("#myTable_2 tr:eq(0) td:eq(1)").text(count);
     $("#myTable_2 tr:eq(1) td:eq(1)").text(5);
});

Answer 4

这是因为 $（＆＃34; tr＆＃34;）。live（＆＃39; click＆＃39;，function（）{}）; ^^^^^在html中有2个计数。要确保.live（）或.delegate（）执行一次，$（selector）.delegate（）中的选择器最好是＆＃34; $（table [name = users]）＆＃34;而不是$（＆＃39; td＆＃39;）或$（＆＃39; tr＆＃39;）

Answer 5

某些元素可能具有相同的属性（类名，标记名称等），您可能会忽略它们。这可能会导致这种冲突。在下面的示例中，“tr”元素用作警报的选择器，但脚本有两个嵌套的“tr”元素，其中包含“text”目标。因此，只需单击一下，就可以单独为每个（从里到外）“tr”元素触发警报。这称为bubbling。您只需使用stopPropogation()即可停止bubbling。

$("tr").live('click',function() {
    alert('A row in table 1 is clicked!');
    event.stopPropogation();
});

<table>
  **<tr>**
    <td>    
      <table id="myTable_1">
        **<tr>**
         <td>Test</td>
        **</tr>**
      </table>
    </td>
  **</tr>**
</table>

http://jsfiddle.net/6UmpY/97/

每次点击都会调用两次jQuery函数

5 个答案: