11

设置：

当点击 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 中的单元格数据正在更改。但是，对于每次点击，该功能都会执行两次。我可以看到每次点击都会出现两次警报框。

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

4

5 回答 5

12

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

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

        ...

        $( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
    });
于 2013-02-11T13:53:41.533 回答
11

以下任一项：

  1. 单击的行位于另一行内（单击了两行）。（示例）
  2. 您显示的代码执行了两次（示例）。

为了解决这个问题，让你的选择器更具体。如果您使用 jQuery 1.7+，请使用.on： http live: //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() {
于 2012-05-06T19:34:07.643 回答
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);
});
于 2012-05-06T19:34:30.407 回答
0

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

于 2014-04-11T05:41:26.147 回答
0

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

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

于 2015-06-26T12:53:00.913 回答