将标识符传递给jQuery单击事件处理程序

Question

我有从数据库中提取记录并生成表格（通过ajax）的代码。我想在表的每一行中放一个按钮来对指定的记录进行一些处理，但我需要一种方法来知道它适用于哪条记录。我尝试过这样的事情：

在生成表的.ajax方法中，我有代码构建一个字符串，并将其子化到表体中。这是此问题的关键：

ActionTable += "<td><button class='btn' id='review' name = '" + obj[line].iID + "'>Review</button></td>";

在document.Ready函数中，我尝试了很多变化：

    $('#review').on('click', function(){
        alert("In click");

        var actionID = $(this).attr("name");
        reviewAction(actionID);
    });

但很明显，在此代码中，$（this）不再适用于单击的按钮。我也尝试在on（'click'代码中设置数据，如下所示：

        $('#review').on('click', {actionID:$(this).attr("name")}, function(){
            alert("In click");

            reviewAction(actionID);
        });

但这也不起作用。我无法为每个按钮设置单独的处理程序，因为直到运行时我才知道将会有多少行，或者每行的ID是多少。

那么如何为这些按钮创建一个处理程序，知道哪个按钮叫它？

Answer 1

事件处理程序接受event对象作为参数，然后您可以使用event.target来了解已单击的元素。

请注意，如果您在目标中使用已注册的处理程序嵌套了元素，则可能需要使用event.currentTarget（除非您使用箭头函数，否则应该等同于this）。

示例1

HTML

<ul id="list">
  <li data-value="1">One</li>
  <li data-value="2">Two</li>
  <li data-value="3">Three</li>
</ul>

JS

jQuery(document).ready(($) => {
  $('#list').on('click', function(e) {
    console.log( $(e.target).data('value') );
  });
});

Working Example

示例2

HTML

<ul id="list">
  <li data-value="1">
    <span data-value="nested">One</span>
  </li>
  <li data-value="2">Two</li>
  <li data-value="3">Three</li>
</ul>

JS

jQuery(document).ready(($) => {
  $('#list li').on('click', function(e) {
    // Click on li[data-value='1']
    console.log( $(e.target).data('value') ); // 'nested'
    console.log( $(e.currentTarget).data('value') ); // 1
  });
});

Working Example