Question

我正在尝试注册点击我的数组中可编辑类的所有<td>元素：

<td class="editable"> Test1 </td>
<td class="editable"> Test2</td>
<td class="editable"> Test3 </td>
<td class="editable"> Test4 </td>

JS

function registerClickOnEditableRow() {
    for (var i=0; i<$(".editable").length; i++) {
        var currentRow = $(".editable")[i];
        $(currentRow).click(function() {
           $("#oldValueInput").val($(currentRow).text());   
        });
    }
 }

问题：当点击一个随机的td元素时，$（currentRow）.text（）的值总是等于最后注册的元素。

Answer 1

您需要使用上下文this而不是通用选择器。使用jQuery，您可以：

$("td[contenteditable]").click(function () {
  alert($(this).text());
});

Answer 2

这是一种简单的方法。

您不需要for循环来在所有td.editable元素上注册click事件。：）

你可以这样做，

function registerClickOnEditableRow() {
    $('td.editable').click(function() {
        $("#oldValueInput").val($(this).text());   
    });
 }

Answer 3

其他人已经覆盖了明显的问题，但是你应该避免使用单个事件处理程序（即每个项目）的负载。对于大量项目而言效率非常低，并且可能会对页面启动造成明显的延迟。

而是使用单个委托的on事件处理程序，附加到项目的单个不变的祖先（例如，在这种情况下为表格）：

$('table').on('click', 'td.editable', function(){
    $("#oldValueInput").val($(this).text());   
});

这会处理动态添加的项目，因此永远不需要重新连接。它的工作原理是通过监听事件（click）来冒泡到连接的祖先。它然后在事件时将jQuery选择器应用于bubble bubble中的元素。然后，它将回调仅应用于导致事件的匹配元素。

这对于许多元素来说效率更高。事件时间的额外开销较小，永远不会被注意到（除非你每秒可以点击50,000次！）。

Answer 4

在以下示例中使用$(this)似乎是最简单的解决方案。

function registerClickOnEditableRow() {
  for (var i=0; i<$(".editable").length; i++) {
    var currentRow = $(".editable")[i];
    $(currentRow).click(function() {
       console.log($(this).text());
    });
  }
}

但是如果你有10000个td个节点，那么你也会注册10000点击事件处理程序，这是一个很大的开销。

最好只向一个根元素注册一个事件处理程序（在您的示例中为table节点），并测试事件目标是否是相关子节点之一。这种方法称为event delegation。

function registerClickOnEditableRow() {
  $("table").click(function(event) {
    var target = $( event.target );
    if(target.is(".editable")) {
      console.log($(event.target).text());
    }
  });
}

在这里，您可以看到jquery way of event delegation：

function registerClickOnEditableRow() {
  $("table").on( "click", ".editable", function() {
    console.log($(this).text());
  });
}

注册单击所有元素到表中

4 个答案: