加載新的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，並且將跟蹤出現的新元素在后面的頁面上:)