使用jQuery從dom中刪除特定的數據

我在這裏有一個創建工具提示的函數，這些工具提示是在無限滾動的頁面上創建的（例如，一旦我們點擊頁面底部函數被再次調用），也許值得一提的是，我還使用jScrollPane作爲自定義滾動條，並通過我的工具提示功能同時重新初始化。使用jQuery從dom中刪除特定的數據

問題在於，每次函數重新初始化時，我的工具提示都會一次填充多個圖像，每重新執行一次無限滾動回調就會重複一次。

這是功能：

function tooltipsInit() { 

     //Setting the targeted elements variable 
     var appliesTo = '.products .products-grid li .product-image-visible a, .featured .products-grid li .product-image-visible a, .new .products-grid li .product-image-visible a, .popular .products-grid li .product-image-visible a'; 
     jQuery(appliesTo).mouseenter(function() { 
     jQuery(this).children('p').addClass('active'); 
     if((navigator.platform.indexOf("iPad") != -1) || (navigator.platform.indexOf("iPhone") != -1)) { 
      //disabling the tooltips on iPad/iPhone 
     } else { 
      jQuery('body .wrapper').append('<div class="hcontainer"><div class="image"></div><div class="title"></div></div>'); 
      jQuery(this).children('img').clone().appendTo('.hcontainer .image'); 
      title = jQuery(this).children('img').attr('alt'); 
      jQuery('.hcontainer .title').append(title); 
      jQuery('.hcontainer').fadeIn(200); 

      function removeDuplicates() { 
      //THIS IS MY QUESTION RELATED TO 
      jQuery.removeData(); 
      } 
      removeDuplicates(); 
     } 
     }); 
     jQuery(appliesTo).mousemove(function(e) { 

     offsetX = 235; 
     offsetY = 175; 

     windowHeight = jQuery(window).height(); 
     windowWidth = jQuery(window).width(); 
     ypos = 0; 
     xpos = 0; 

     if((e.pageY + 355) < windowHeight) { 
      ypos = e.pageY + offsetY; 
     } else { 
      ypos = e.pageY - (offsetY + 30); 
     } 

     if((e.pageX + 455) < windowWidth) { 
      xpos = e.pageX + offsetX; 
     } else { 
      xpos = e.pageX - (offsetX + 30); 
     } 

     jQuery(".hcontainer").css("top", (ypos) + "px").css("left", (xpos) + "px"); 
     }); 

     jQuery(appliesTo).mouseleave(function() { 
     jQuery(this).children('p').removeClass('active'); 
     jQuery('.hcontainer').fadeOut(100).remove(); 

     }); 


    };

像這個我清除整個DOM數據（？右）和我在Chrome瀏覽器開發工具的一些錯誤。

Uncaught TypeError: Cannot read property 'nodeName' of undefined jquery-1.8.3.min.js:1719 
jQuery.extend.acceptData jquery-1.8.3.min.js:1719 
jQuery.extend.removeData jquery-1.8.3.min.js:1633 
removeDuplicates custom-scripts.js:160 
(anonymous function) custom-scripts.js:162 
jQuery.event.special.(anonymous function).handle jquery-1.8.3.min.js:3344 
jQuery.event.dispatch jquery-1.8.3.min.js:3058 
elemData.handle.eventHandle

我能做些什麼來準確地選擇被添加到DOM數據，並只刪除？

，如：removeData(mytooltipfunctionsData)

而且還對同一主題，我是相當新的JavaScript/jQuery的，你將如何改善功能？

編輯

我傻......我把你寫什麼有定睛一看，我仍然運行它，將被調用函數中...然後我意識到你所做的不需要一個功能，因爲正如你所說，這是事件代表團:)。

謝謝，它工作！在無限滾動中沒有重複和沒有錯誤。

來源

2012-12-06 Arthur Kovacs

因爲我不知道你在哪裏初始化jscrollpane，你試圖刪除什麼數據，更新你的答案，所以我可以更新我的 – pocesar

jQuerys removeData必須通過一個DOM節點，而不是一個jQuery對象。而不是做jQuery.removeData($(this));例如，你需要做的jQuery.removeData(this)，或者如果您使用的是選擇，jQuery.removeData($('.selector')[0])

有關的重複，你可能會在當前的DOM已經被初始化信號傳輸給你的功能，如

jQuery(appliesTo).each(function(){ 
    var $this = $(this); 

    if (!$this.data('initialized')){ // skip in case it's been already initialized 
    $this.data('initialized', true); 

    $this.on({ 
     'mouseenter': function(){...}, 
     'mousemove': function(){...}, 
     'mouseleave': function(){...} 
    }); 
    } 

});

而不是removeData，國際海事組織，你應該使用off()，就像$this.off()將刪除匹配元素中的所有綁定事件。另一種方法是使用事件委託，所以你不會需要重新初始化，它只會工作，爲新老元素，像這樣：

var appliesTo = '.products .products-grid li .product-image-visible a, .featured .products-grid li .product-image-visible a, .new .products-grid li .product-image-visible a, .popular .products-grid li .product-image-visible a'; 

jQuery(document) 
.on('mouseenter', appliesTo, function(){...}) 
.on('mouseleave', appliesTo, function(){...}) 
.on('mousemove', appliesTo, function(){...});

jQuery.on是結合事件或事件委派當前首選方式。代理的第二種方式，因爲jQuery(document)將始終存在，無論appliesTo中的任何元素，添加到頁面的任何元素都已經綁定了元素，而不是每次都手動啓動它（無論是頁面加載，ajax事件等）

來源

2012-12-06 16:16:12 pocesar

就像一個魅力:) –

使用jQuery從dom中刪除特定的數據

回答

相關問題