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?

Solution

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