那是我的问题,我在表格中追加了一个新行。这一行是一个按钮,它应该是可点击的并触发一个事件。我找到了很多解决方案,但每个解决方案都包含这种方式:
.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-delete 部分编写两次。
理论上听起来很简单,激活删除按钮的点击事件,点击后,将调用 AJAX 删除部分。
但在实践中我找到了一个像这样的简单解决方案。
希望你们给我一个...
非常感谢!!!
最佳答案
为您添加的按钮提供一个全局类,例如 delete
并使用事件委托(delegate) 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>
关于javascript - Jquery在没有函数的表中追加新行后添加点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36901370/