将jquery插件功能附加到动态创建的DOM元素

Question

我正在使用jQuery插件拖动表列以按以下方式重新排列它们

$("#myTable").dragtable();

它适用于现有表，我可以拖动表列。 但是我需要在myTable中动态添加行，但是不能拖动动态添加的列。

我查看了.live方法的文档，但不确定如何在我的方案中使用它。

有什么建议吗？

Answer 1

您可以这样：

$('.defaultTable').dragtable('destroy').dragtable({});

完整示例：

 $('.defaultTable').dragtable(); $('#add-column').click(function(e){ var tbody = $('.defaultTable').find('tbody'), thead = $('.defaultTable').find('thead'); tbody.find('tr').each(function(){ var tr = $(this); tr.append('<td>Some column</td>'); }); thead.find('tr').each(function(){ var tr = $(this); tr.append('<th>appended column header</th>'); }); $('.defaultTable').dragtable('destroy').dragtable({}); }); 

 <link href="https://rawgit.com/akottr/dragtable/master/dragtable.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> <script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script> <span id="add-column">Add column</span> <table class="defaultTable sar-table"> <thead> <tr> <th>TIME</th> <th>%user</th> <th>%nice</th> <th>%system</th> <th>%iowait</th> <th>%idle</th> </tr> </thead> <tbody> <tr> <td>12:10:01 AM</td><td>28.86</td><td>0.04</td><td>1.65</td><td>0.08</td><td>69.36</td> </tr> <tr> <td>12:20:01 AM</td><td>26.54</td><td>0.00</td><td>1.64</td><td>0.08</td><td>71.74</td> </tr> <tr> <td>12:30:01 AM</td><td>29.73</td><td>0.00</td><td>1.66</td><td>0.09</td><td>68.52</td> </tr> </tbody> </table> 

Answer 2

在这种情况下，您不能使用.live。 您只需为添加的每个新元素调用.dragtable() 。