Question

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

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);
            });
        });

Answer 1

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

$( '.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>

编辑：

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

Answer 2

您应该将事件委托给最近的静态父容器。例如，如果.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 );

Answer 3

委托已被.on（）方法取代（有关它的更多信息here）所以我将使用“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);
    //});
});

将事件动态绑定到表行＆amp;列

3 个答案: