Bootstrap Popover in JQuery Datentabelle funktioniert nicht nach Suche

Question

ich eine HTML-Tabelle haben:

<table id="PeopleTable" class="table table-striped table-bordered"> 
<thead> 
    <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Pop</th> 
    </tr> 
</thead> 
<tbody> 
    <tr><td>0</td><td>Michael</td><td><button class='popoverButton'>Popover</button></td></tr> 
</tbody></table> 

Und ich möchte die Datentabellen verwenden Plug-in suchen, Ordnung und Filterfunktionalität haben. Ich möchte auch Bootstrap verwenden, um eine popover zu zeigen, wenn die Schaltfläche geklickt wird, also habe ich versucht, dies:

var peopleTable = $('#PeopleTable').DataTable({ 
      drawCallback: function() { 
       $('.popoverButton').popover({ 
        "html": true, 
        trigger: 'manual', 
        placement: 'left', 
        "content": function() { 
         return "<div>Popover content</div>"; 
        } 
       }).click(function (e) { 
        $(this).popover('toggle'); 
        e.stopPropagation(); 
       }); 
      } 
     }); 

Das Problem ist: Wenn ich eine Suche, die Spaltensortierung oder eine Operation mit dem Datatable, die Popover hört auf zu arbeiten.

Here is the fiddle wenn Sie es versuchen möchten.

Ist "Zeichnen" das richtige Ereignis, um dies durchzuführen oder sollte ich ein anderes verwenden? Vermisse ich noch etwas anderes?

Answer 1

Aktualisiert JS Geige Link - https://jsfiddle.net/dxrjm530/4/

Sie müssen nur Ihr Click-Ereignis von Taste nehmen, weil nach dem Sortieren wird zweimal genannt zu werden, durch Verfahren der Datentabelle drawcallback.

 $('#PeopleTable').DataTable({ 
      drawCallback: function() { 
       $('.popoverButton').popover({ 
        "html": true, 
        trigger: 'manual', 
        placement: 'left', 
        "content": function() { 
         return "<div>Popover content</div>"; 
        } 
       }) 
      } 
     }); 

     $('#AddRow').on('click', function(){ 
      var peopleTable = $('#PeopleTable').DataTable(); 
      peopleTable.row.add(
       ['1', 
       "David", 
       "<button class='popoverButton'>Popover</button>"] 
      ).draw(); 
     }); 



     $('table').on('click', function(e){ 
     if($('.popoverButton').length>1) 
     $('.popoverButton').popover('hide'); 
     $(e.target).popover('toggle'); 

     });