Attach jquery Funktion Plugin DOM-Elemente dynamisch erstellt

Question

ich eine jQuery-Plugin bin mit Tabellenspalten zu ziehen, um sie wie neu anordnen unter

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

Es funktioniert für vorhandene Tabelle in Ordnung und ich kann Tabellenspalten ziehen. Allerdings muss ich dynamisch Zeilen in myTable hinzufügen, aber ich kann dynamisch hinzugefügt Spalte nicht ziehen.

Ich sah Dokumentation für .Live-Methode, aber nicht sicher, wie ich es in meinem Szenario verwenden würde.

irgendein Vorschlag?

Answer 1

In dieser Situation können Sie .live nicht verwenden. Sie müssen einfach .dragtable() für jedes neue Element aufrufen, das Sie hinzufügen.

Answer 2

Sie können wie folgt tun:

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

Voll Beispiel:

$('.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>