Question

I am using these functions which work perfectly:

    $(document).on('click', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('mouseenter', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('mouseleave', '.profile li', function(e) {
            //Alot of cool code
    });
    $(document).on('keydown', '.profile li', function(e) {
            //Alot of cool code
    });

but I wanted to combine them into this:

    $('.profile li').on({
        mouseenter: function (e) {
             //Alot of cool code
        },
        mouseleave: function (e) {
             //Alot of cool code
        },
        click: function (e) {
            //Alot of cool code
        },
        keydown: function (e) {
            //Alot of cool code
        }
    });

However, since they rely on elements that get created after the dom the combined code does not work. So my question is this, is there a way to combine them into the second way and still have them work with classes that are created after the dom. Also is there really any point in combining them? I seem to remember reading some where that its better but I cant remember why or if that was a dream…

Answer 1

Just pass the selector as the second parameter, note that using closest static parent is more efficient than using document object.

$(document).on({
    mouseenter: function (e) {
         //Alot of cool code
    },
    mouseleave: function (e) {
         //Alot of cool code
    },
    click: function (e) {
        //Alot of cool code
    },
    keydown: function (e) {
        //Alot of cool code
    }
}, '.profile li');