jQuery - on() issue on dynamically added elements

I have a page that recovers data from json and generates a list of products. The user can switch between two different styles when clicking in a button that changes the parent ul to ul.fullview. When browsing the products with ul.fullview on, the products that received the class .highlighted should appear with a bigger thumbnail, while the other products receive an absolute position to fit into the layout. This is all done by CSS and a simple tooggleClass(). The problem lies on the mouseenter / mouseleave event within these two different views. When browsing using the default view, all the products should have the same animation. When the parent ul is .fullview, the .highlighted products must have a different animation. Since I'm working with dynamically added elements, I had to use .on() instead of .hover(). How can I make these selectors work with .on()?

$('div.products ul:not(.fullview) li:not(.highlighted)').hover(
  function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

$('li.highlighted').hover(
  function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
  }, 
  function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
  }
);

The code above should work if the elements were not added by javascript. I was able to make the default view work with the script below:

$('div.products ul').on({
    mouseenter: function () {
    $(this).find($('div.tooltip')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },
    mouseleave: function () {
    $(this).find($('div.tooltip')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li');

But when I add these lines, it stops loading the json data:

$('div.products ul.fullview').on({
    mouseenter: function () {
    $(this).find($('div.description')).show();
    $(this).find($('div.fb-like')).fadeIn(150);
    },

    mouseleave: function () {
    $(this).find($('div.description')).fadeOut(150);
    $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'li.highlighted');

What am I doing wrong?

Answers


You are saying:

changes the parent ul to ul.fullview

I would assume that makes ul.fullview dynamic as at the time of binding it is simply a ul without the 'fullview' class but then changed dynamically to have the class.

Try this:

$('div.products').on({
    mouseenter: function() {
        $(this).find($('div.description')).show();
        $(this).find($('div.facebook-like')).fadeIn(150);
    },

    mouseleave: function() {
        $(this).find($('div.description')).fadeOut(150);
        $(this).find($('div.fb-like')).fadeOut(150);
    }
}, 'ul.fullview li.highlighted');‚Äč

Need Your Help

Use JSONP To Return an Array From PHP to JavaScript

javascript jquery jsonp

I am attempting to use JSONP to return an array from PHP to JavaScript. Hopefully, my code will demonstrate exactly what I'm trying to do because I am not even so sure how to word it...

Application crashes Android 4.3+ in native code with app using matrix calculations on a canvas

java android android-canvas android-4.3-jelly-bean

Before you spend more time reading this than necessary: I will be answering this question myself. I spent a full day debugging this and thought I should share.