after loading new html content tooltip does not work

Question

I have a problem with displaying a tooltip after loading new elements in a div.

My 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);
         });
     });
});

when calling the .prop-next click element in the div .props new content appears, while the script does not work:

tooltip code:

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

your code that binds mouse movement is done only once,, on page load, and that for consequence has that new items (the one that comes down the wire via AJAX) are not having that binging added.. instead of:

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

try so add dinamicly, or live hooking,, something like this should work:

$('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 this line: $('body').on('mousemove', '.tooltip', .. you define that your parent element (body) track mousemove only on .tooltip element, and that will track your new element that appear on page latter :)