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删除部分将被调用。

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

希望你们对我有一个...

非常感谢！

来源

2016-04-27 grizzly

的[事件绑定上动态创建的元素？]（可能的复制http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-元素） – ventaquil

我知道这种方式，但即时通讯寻找一种解决方案，小心我写两次代码。 – grizzly

如果你想添加的动态添加的内容，您应使用此代码Click事件：

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

对于简单td元素与类：

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

来源

2016-04-27 21:40:17 ventaquil

我知道这种方式，但即时通讯寻找一种解决方案，谨防我写两次代码。 – 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>

来源

2016-04-27 21:51:04

谢谢...问题不是找到/调用正确的按钮。我发现它但不会触发，因为迄今为止我发现的唯一解决方案是使用.on（function {}）方法，但这种方法包括两次写入一个缩进代码 – grizzly

为什么您必须_write一个indentical代码两次？你只需要创建一个事件，然后将它附加到添加的每个按钮上并具有“删除”类。 –

这听起来像是正确的方式...到目前为止，我通过这种方式调用删除事件： $（'button [name =“deleteButton”]'）。click（function（）{...}）; 我怎样才能将它分开编写并在这些按钮上调用它？ – grizzly

Jquery添加点击事件后，在表中追加新行无功能

回答

相关问题