1

我这里有一个创建工具提示的函数，这些工具提示是在具有无限滚动的页面上创建的（例如，一旦我们点击页面底部，该函数就会再次被调用），也许值得一提的是我也使用 jScrollPane 作为一个自定义滚动，它与我的工具提示功能同时重新初始化。

问题在于，每次重新初始化函数时，我的工具提示都会一次充满多个图像，每次重新初始化都会在无限滚动回调中重复。

这是功能：

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 还很陌生，您将如何改进该功能？

编辑

我很愚蠢......我仔细看看你在那里写的东西，我仍然在一个会被调用的函数中运行它......然后我意识到你在那里所做的不需要一个函数，因为你说，这是事件委托:)。

谢谢，它工作！无限滚动没有重复和错误。

4

1 回答 1

0

jQueryremoveData必须传递一个 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, IMO, 你应该使用off(), like$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-06T16:16:12.353 回答