加载新的html内容工具提示后不起作用

Question

在div中加载新元素后，显示工具提示时出现问题。

我的内容加载代码：

$ (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);
         });
     });
});

当在div .props中调用.prop-next click元素时，将显示新内容，而脚本不起作用：

工具提示代码：

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

您的绑定鼠标移动的代码仅在页面加载时执行一次，其结果是新项（通过AJAX从网络上下来的项）没有添加该绑定。.而不是：

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

尝试这样动态添加或实时挂接，这样的方法应该起作用：

$('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;
  }
});

在此行中： $('body').on('mousemove', '.tooltip', ..定义您的父元素（body）仅在.tooltip元素上跟踪mousemove，并且将跟踪出现的新元素在后面的页面上:)