加載新的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元素上，並且會跟蹤您在頁面上顯示的新元素:)