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

设置：

我编写了一个jQuery函数，用于在单击表_1中的一行时更新表_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>

$（“tr”）.live（'单击'，函数（）{
var host=$（这个）；
警报（'单击表1中的一行！'）；
var count=host.find（“td”）.eq（2）.text（）；
$（“我的表格2 tr:eq（0）td:eq（1）”）。文本（计数）；
$（“#我的表格2 tr:eq（1）td:eq（1）”）。正文（5）；
});

问题：

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

---

谁能告诉我为什么会这样？如何避免这种情况？

以下任一情况：

单击的行位于另一行内（单击两行）。（）

您显示的代码将执行两次（）

要解决此问题，请使选择器更具体。如果您使用的是jQuery 1.7+，请使用而不是

live

：

注意：使用

.on

而不是

live

无法解决问题。
使用更具体的选择器确实解决了问题。
如果您喜欢

直播

，以下操作也可以：

---

假设

表_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（）

已被弃用，请按上面的方式编写。您可以执行两次代码，因为选择器同时属于表和事件绑定两次

您还可以使用

delegate（）

：

---

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

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

        ...

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

因为 $（“tr”）.live（'click'，function（）{}）； ^^^^^在html中有2个计数。

---

为了确保.live（）或.delegate（）只执行一次，$（selector）.delegate（）中的选择器最好是“$（table[name=users]），而不是$（'td'）或$（'tr'）

某些元素可能具有您可能忽略的相同属性（类名、标记名等）。这可能导致这样的冲突。在下面的示例中，“tr”元素用作警报的选择器，但脚本有两个嵌套的“tr”元素，其中包含“text”目标。因此，只需单击一下，您就会分别为每个（由内而外）“tr”元素触发警报。这就是所谓的。你可以简单地用它来停止这个过程

$（“tr”）.live（'click'，function（）{
警报（'单击表1中的一行！'）；
event.stopPropogation（）；
});
****
****
试验
****
****

---

谢谢您的回复。那么，您的意思是使用“on”或

委托将解决函数被调用两次的问题吗？@Learner no
on（）
用于从jquery 1.7+绑定事件，而使用
#table_1
将解决两次事件激发问题，因为它将只选择属于第一个表的
tr
，这样做是否有任何潜在的负面后果？这将停止在接收事件的元素上侦听事件的任何其他内容。事件是按添加顺序调用的，只有在此事件之后添加的事件才会被阻止。
$("#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);
        });

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

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

        ...

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

$("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>