javascript - 动态创建( Bootstrap )html 表格行 - 单击事件不会触发

Question

这个问题已经有答案了:

Click event doesn't work on dynamically generated elements [duplicate] (20 个回答)

已关闭 5 年前。

我在 View 中使用 Bootstrap 表，并且表行是动态创建的，并且创建后，我想将 .onclick 事件附加到我的行，这样万一有人单击该行，我可能会突出显示它，我试了又测试，但不知道如何解决这个问题。

这是我的代码:

1.) 首先，尝试 - 绝对不好，因为我的行上不断附加事件，点击几次后会弹出 5-6-7 警报..

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>

     $('#TableItems').click(function (e) {
            $('#TableItems tr').click(function (e) {
                alert("Clicked!");
            });
        });

</script>

2.) 第二次尝试 - 也不好，因为 View 已渲染并且 tr 尚未呈现，因此可能无法附加 onclick 事件，因为当我单击它时什么也没发生

$('#TableItems tr').click(function (e) {
                alert("Damn");
         });

这是我的 table

<div class="table-responsive" id="myTable">
   <table class="table table-striped  jambo_table bulk_action">
     <thead>
       <tr class="headings">
          <th class="column-title">Title </th>
        </tr>
     </thead>
    <tbody id="TableItems"></tbody>
   </table>
</div>

Answer 1

您可以使用 .on() 为此

$('#TableItems').on('click', 'tr', function (e) {
    alert("Damn");
});