加载新的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中.prop，接下来点击元素时

.props新的内容出现，而脚本不起作用：

提示代码：

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下线的项目）不是h AVING是暴食补充，而不是..：

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', ..你定义你的父元素（body）跟踪鼠标移动仅在.tooltip元素上，并且会跟踪您在页面上显示的新元素:)