将事件动态绑定到表行和列

Bindings Events dynamically to Table rows & Columns

本文关键字：事件 动态绑定      更新时间：2023-09-26

我正在尝试仅在第二列上应用单击事件，并在第三列的按钮上应用单击事件，但事件未触发。

.html：

<table class="table table-bordered table-hover">
      <tr>
        <td class="webIcon">
        <img src="Img/icon.png"></img>
        </td>
        <td class="tabTitle tabRow">Smith</td> 
        <td class="closeTab">
            <button type="button" class="btn btn-default btn-sm " aria-label="Left Align">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </td>
      </tr>
</table>

jquery：

 $( '.table tr:nth-child(2)').delegate("td","click",function(){
            $('.tabRow').click(function(){
                var id = $(this).parents('tr').attr('id');
                console.log(id);
            });
        });
  $( '.table tr:nth-child(3)').delegate("td","click",function(){
            $('.button').click(function(){
                var id = $(this).parents('tr').attr('id');
                console.log(id);
            });
        });

您的代码更复杂。试试这个 

$( '.table .tabTitle').on("click",function(){            
    var id = $(this).parents('tr').attr('id');
    console.log(id);            
});
$( '.table .btn').on("click",function(){           
    var id = $(this).parents('tr').attr('id');
    console.log(id);
});


$('.table .tabTitle').on("click", function() {
  var id = $(this).parents('tr').attr('id');
  console.log(id);
});
$('.table .btn').on("click", function() {
  var id = $(this).parents('tr').attr('id');
  console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <tr id="ID1">
    <td class="webIcon">
      <img src="Img/icon.png"></img>
    </td>
    <td class="tabTitle tabRow">Smith</td>
    <td class="closeTab">
      <button class="btn btn-default btn-sm " aria-label="Left Align">Button
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </button>
    </td>
  </tr>
</table>

编辑：

  • 如果可以，请避免使用 n 个子（n） 选择器，因为这会影响页面的加载性能。

delegate 已被 .on（） 方法取代（更多信息在这里），所以我将使用"on"而不是"delegate"（希望你不介意）。

按照您的代码风格，您可以尝试如下内容：

$('.table').on("click", "tr td:nth-child(3)", function () {
    $(this).find("button").off('click').on('click', function() {// Remove the click event firstly or you'll end up with a pile of them
        var id = $(this).parents('tr').attr('id');
        console.log(id);
    });
});

不过我会这样做：

$('.table').on("click", "tr td:nth-child(3) button", function () {
    //$(this).find("button").off('click').on('click', function() {
        var id = $(this).parents('tr').attr('id');
        console.log(id);
    //});
});
应将

事件委托给最近的静态父容器。例如，如果 .table 元素是静态的，并且在绑定事件时在 DOM 中可用：

$('.table').delegate("tr .tabRow, tr .btn","click",function(){
     var id = $(this).closest('tr').attr('id');
     console.log(id);
});

请注意：

从 jQuery 1.7 开始，.delegate（） 已被 .on（） 方法取代。 但是，对于早期版本，它仍然是最有效的方法： 使用事件委派。有关事件绑定和委派的详细信息 在 .on（） 方法中。通常，这些是等效的模板 对于这两种方法：

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
相关文章：