nach dem Laden neuer HTML-Inhalt Tooltipp funktioniert nicht

Question

Ich habe ein Problem mit der Anzeige eines Tooltip nach dem Laden neuer Elemente in einem div.

Mein content loading Code:

$ (Function() { 
     
     $ ('. Prop-next'). Click (function() { 
         $ ('.props') .html ('<img src = "/ images/loading.gif" class = "loading" />') 
         var p = parseInt ($ (this) .attr ('p')) + 3; 
         $ (this) .attr ('p', p); 
         $ .post ('/ lib/props.php', {p: p}, function (item) { 
             $ ('. Props'). Html (item); 
         }); 
     }); 
}); 

wenn im div das .prop-nächsten Klick Element Aufruf .props neue Inhalte angezeigt wird, während das Skript nicht funktioniert:

Tooltip Code:

nur einmal durchgeführt wird ,, auf Seite Last

var tooltips = document.querySelectorAll ('.tooltip'); 

window.onmousemove = function (e) { 
     var x = (e.clientX - 350) + 'px', 
         y = (e.clientY + 50) + 'px'; 
     for (var i = 0; i <tooltips.length; i ++) { 
         tooltips [i] .style.top = y; 
         tooltips [i] .style.left = x; 
     } 
}; 

Answer 1

Ihren Code, die Mausbewegung bindet, und dass für die Folge hat, dass neue Objekte (die, die über AJAX auf den Draht kommt) nicht h aving dass binging hinzugefügt .. statt:

window.onmousemove = function (e) { // .. } 

versuchen dinamicly so hinzufügen oder Live-Einhaken ,, so etwas wie dies funktionieren soll:

$('body').on('mousemove', '.tooltip', function(e) { 
    var x = (e.clientX - 350) + 'px', 
    y = (e.clientY + 50) + 'px'; 
    for (var i = 0; i < tooltips.length; i++) { 
    tooltips[i].style.top = y; 
    tooltips[i].style.left = x; 
    } 
}); 

in dieser Zeile: $('body').on('mousemove', '.tooltip', .. Sie festlegen, dass Ihr übergeordnetes Element (body) track mousemove nur auf .tooltip element, und das wird verfolgen Ihr neues Element, das auf der Seite letztere :)