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下线的那个）没有添加binging而不是：< / p>

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

尝试添加dinamicly，或者实时挂钩，这样的事情应该有效：

$('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', ..您定义您的父元素（正文）仅在.tooltip元素上跟踪鼠标移动，并且将跟踪您在页面上显示的新元素：）

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

1 个答案: