Jquery在表WITH函数中追加新行后添加单击事件

Jquery add click event after append new row in table WITHOUT function

本文关键字：添加 单击 事件 新行 追加 在表 WITH 函数 Jquery      更新时间：2023-09-26

这是我的问题，我在表中添加了一个新行。这一行中有一个按钮，应该可以点击并触发事件。我找到了很多解决方案，但每一个都包含这样的内容：

.on('click', 'button', function(){    
//do something    
});

在这个地方需要一个没有该功能的解决方案调用（只激活点击的可能性）。问题是，我有三个不同的ajax部分用于添加、编辑和删除表行。我通过contentEditable表来控制它。因此，每一行都有一个按钮来编辑和删除这一行。如果我插入新行，新行将获得这些按钮。为了让我的按钮像上面的例子一样运行，我得到了这样的结构：

// AJAX for edit row
do something
// AJAX for delete row
do something
// AJAX for add row
$('#editTable > tbody:last').append('<tr><td><button>DELETE</button></tr><td>');
$('#table').on('click', 'button', function() {
    // AJAX for delete row
    do something
});

通过这种方式，我看到了问题，我不得不写两次完整的AJAX删除部分。

理论上，这听起来太容易了，激活删除按钮的点击事件，点击后，AJAX删除部分将被调用。

但在实践中，我找到了这样一个简单的解决方案。

希望你们有一个给我…

非常感谢！！！

给您添加的按钮一个全局类，例如delete，并使用事件委派on（）为所有按钮添加一个事件，查看下面的示例。

JS:

$('#editTable > tbody:last').append('<tr><td><button class="delete">DELETE</button></tr><td>');
$('body').on('click', '.delete', function (event) {
    //Your code here
});

希望这能有所帮助。

$('body').on('click', '#add', function (event) {
  $('#editTable').append('<tr><td>test<td><td><button class="delete">DELETE</button></tr><td>');
});
$('body').on('click', '.delete', function (event) {
    alert("AJAX for delete row");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add">Add row</button>
<table id="editTable">
    <thead>
      <th>TEST</th>  
      <th>Action</th>  
    </thead>
</table>

如果您想为动态添加的内容添加点击事件，您应该使用以下代码：

$(document).on('click', 'yourcontent', function (event) {
    // ...
});

对于类为的简单td元素

$(document).on('click', 'td.myclass', function (event) {
    // ...
});
相关文章：