Jquery添加点击事件后,在表中追加新行无功能
问题描述:
这是我的问题,我在我的表中追加一个新的行。在这一行是一个按钮,应该可以点击并触发一个事件。我发现吨的解决方案,但他们每个人都包含这样:Jquery添加点击事件后,在表中追加新行无功能
.on('click', 'button', function(){
//do something
});
需要而对这个地方的函数调用一个解决方案(只激活点击的可能性)。 reasen是,我有三个不同的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删除部分将被调用。
但在实践中,我发现了这样一个简单的解决方案。
希望你们对我有一个...
非常感谢!
答
如果你想添加的动态添加的内容,您应使用此代码Click事件:
$(document).on('click', 'yourcontent', function (event) {
// ...
});
对于简单td
元素与类:
$(document).on('click', 'td.myclass', function (event) {
// ...
});
+0
我知道这种方式,但即时通讯寻找一种解决方案,谨防我写两次代码。 – grizzly
答
给你额外的按钮全局类如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>
的[事件绑定上动态创建的元素?](可能的复制http://*.com/questions/203198/event-binding-on-dynamically-created-元素) – ventaquil
我知道这种方式,但即时通讯寻找一种解决方案,小心我写两次代码。 – grizzly