Question

I have here a function that creates a tooltip, these tooltips are created on a page with infinite scroll (e.g. as soon as we hit the bottom of the page the function gets called again),maybe it’s worth mentioning that I am also using jScrollPane as a custom scroll, that gets reinitialized at the same time with my tooltip function.

The problem, is that every time the function is reinitialized, my tooltips get filled with multiple images at once, duplicates per every reinit on the infinite scroll callback.

this is the function:

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();

      });


    };

Like this I am clearing the entire DOM data (right?) and I get some Errors in Chrome dev tools.

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

What can I do to select exactly the data that gets added to the DOM and delete only that?

like: removeData(mytooltipfunctionsData)

And also on the same topic, I am fairly new to Javascript/jQuery, how would you improve the function ?

---

EDIT

I’m stupid … I took a closer look at what you wrote there, and I was still running it inside a function that would get called … then I realized what you made there doesn’t require a function, because as you said, it’s event delegation :).

Thanks, IT WORKS! no duplicates and no errors on infinite scroll.

Answer 1

jQuerys removeData must be passed a DOM node, instead of a jQuery object.
Instead of doing jQuery.removeData($(this)); for example, you need to do jQuery.removeData(this) or if you are using a selector, jQuery.removeData($('.selector')[0])

about the duplicates, you might signal to your function if the current dom have been already initialized, like

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(){...}
     });
   }

});

instead of removeData, IMO, you should be using off(), like $this.off() will remove all your bound events in the matched elements. Another way would be using event delegation, so you won’t need reinitialization, it will just work, for new and old elements, like this:

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 is the current prefered way of binding events or event delegation. The second way delegates, since jQuery(document) will always exist, regardless of any elements from appliesTo, any element that is added to the page will already have the elements bound, instead of manually initiating it every time (be it page load, ajax event, etc)