Tooltip arbeitet nach nicht anhängen Zeilen in der Tabelle jquery

i Tooltip auf Tabellendaten wieTooltip arbeitet nach nicht anhängen Zeilen in der Tabelle jquery

und Code verwendet haben, wird

<tr> 
      <td class="text-center"><%=i %></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getName() %>"><%=client.getName() %></span></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getContactPerson() %>"><%=client.getContactPerson() %></span></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getContactNumber() %>"><%=client.getContactNumber() %></span></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getEmail() %>"><%=client.getEmail() %></span></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getAddress() %>"><%=client.getAddress() %></span></td> 
      <td class="text"><span rel="tooltip" title="<%=client.getDepartment() %>"><%=client.getDepartment() %></span></td> 
      <td class="td-actions text-right"> 
</tr>

auf Paginierung i die Daten über jquery ausfülle, aber nach dem Hinzufügen von Zeilen funktioniert diese oben Tooltip nicht, hier ist mein Javascript-Code

clients.forEach(function(client){ 
        $("#paginationTable tbody").append("<tr>"+ 
        "<td class=\"text-center\">"+(i+1)+"</td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.name+"\""+">"+client.name+"</span></td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.contactPerson+"\""+">"+client.contactPerson+"</span></td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.contactNumber+"\""+">"+client.contactNumber+"</span></td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.email+"\""+">"+client.email+"</span></td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.address+"\""+">"+client.address+"</span></td>"+ 
        "<td class=\"text\"><span rel=\"tooltip\" title=\""+client.department+"\""+">"+client.department+"</span></td>"+ 
        "<td class=\"td-actions text-right\">"+ 
          "<button type=\"button\" rel=\"tooltip\" title=\"View Profile\" class=\"btn btn-info btn-simple btn-xs\">"+ 
          "<i class=\"fa fa-user\"></i>"+ 
         "</button>"+ 
         "<button type=\"button\" rel=\"tooltip\" title=\"Edit Profile\" class=\"btn btn-success btn-simple btn-xs\">"+ 
          "<i class=\"fa fa-edit\"></i>"+ 
         "</button>"+ 
         "<button type=\"button\" rel=\"tooltip\" title=\"Remove\" class=\"btn btn-danger btn-simple btn-xs\">"+ 
          "<i class=\"fa fa-times\"></i>"+ 
         "</button>"+ 
        "</td>"+ 
       "</tr>");

Quelle

2017-02-05 Rakesh Varma

Das ist, weil es keine Ereignis-Listener hat, weil es dynamisch erstellt wird. Überprüfen Sie diesen [** link **] (http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) es könnte helfen! –

Mögliches Duplikat von [Ereignisbindung an dynamisch erzeugten Elementen?] (Http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) –

kann es doppelt sein. Ich brauche Umsetzung. Die exakte Lösung –

Diese Lösung für den Tooltipp Boostrap.

$('body').on('mouseenter', '.tableContent', function() { 
if ($(this).attr('data-toggle') == 'tooltip') 
{ 
    $(this).tooltip({ 
     container: 'body', 
     placement: 'left', 
     trigger: 'hover' 
    }).tooltip('show'); 
}

});

Erklärung

Wenn die Maus Ihres Element schwebt über eine Überprüfung erfolgt, ob die Daten-Toggle noch hinzugefügt wurde, wenn es den Daten-Toggle genannt hinzugefügt wurde die .tooltip() Funktion erweitert und Außerdem wird der Tooltip ('show') aufgerufen, um das Element beim ersten Hover anzuzeigen.

Quelle

2017-06-21 10:19:20

Tooltip arbeitet nach nicht anhängen Zeilen in der Tabelle jquery

Antwort

Verwandte Themen