Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

According to this two questions: [1] and [2]

I need a way to combine these two methods of handling the event attachment in jQuery.

$('selector').on({
    mouseenter: function() {},
    mouseleave: function() {},
    mousedown:  function() {},
    mouseup:    function() {}
});

I prefer the previous method but need something like the following to work with "live"-events. (The problem is, that the next pattern kills the clarity if the code will be a bit larger and even if there're comments between the handlers, it breaks the code.):

$(document).on('mouseenter', 'selector1', function(){})
           .on('mouseleave', 'selector2', function(){})
           // this comment breaks the chain
           .on('mousedown',  'selector3', function(){})
           .on('mouseup',    'selector4', function(){});

However, since there's no real world example to do it like this?:

$(document).on({
    mouseenter: 'selector1': function() {},
    mouseleave: 'selector2': function() {},
    mousedown:  'selector3': function() {},
    mouseup:    'selector4': function() {}
});

...I've ended up with this simple on-wrapper function: https://gist.github.com/4191657

;(function($) {
    $.fn.act = function() {
        var args = arguments;
        return this.each(function() {
            for (var i = args.length; i--;) {
                $(this).on(args[i][0], args[i][1], args[i][2]);
            }
        });
    };
})(jQuery);

Now the usage is quite simpler:

$(document).act(
    ['mouseenter', 'selector1', function() {}],
    ['mouseleave', 'selector2', function() {}],
    ['mousedown', 'selector3', function() {}],
    ['mouseup', 'selector4', function() {}]
);

As @Joonas said that this funtion improves anything. I had the need to came up here with a new question.

So my question, have you any thoughts, suggestions or improvements to this function? Or is there maybe a better solution to handle this problem?

share|improve this question
1  
I don't agree that $(document).on().on() is any less clear than your last example. Also, comments between the handlers don't break the code, as you can see here: jsfiddle.net/xXQnC –  Alexey Lebedev Dec 3 '12 at 12:07
    
I'm inclined to agree with Joonas and @AlexeyLebedev. The 2 questions you link to were about different handlers for different selectors, but the event type was always "click". Like a math equation, when one part of the equation is constant, you can make some shortcuts. But if you want to have different handlers for different selectors and different event types, well, that's exactly what jQuery already gives you with .on(). –  Flambino Dec 3 '12 at 12:38
    
@AlexeyLebedev Nice! I think there was another problem then... In view of that fact were my questions probably unnecessary :P –  yckart Dec 3 '12 at 14:08
    
@yckart the comment might be breaking the chain because you're not "using strict"; and the browser assumes a semicolon at the line before the comment. –  ANeves Dec 4 '12 at 15:43
add comment

1 Answer

  • Try placing the comments inside the callback instead to avoid breakage. I also do this on if-else statements as well so comments remain uniform.

  • Event maps are better when appending multiple event handlers to the same selector.

  • If you want a bit readability, move the handlers away from the attaching procedure. That way, they look clean

So here it is in the end:

//handlers

function selector1handler(){
    //comment here
};

function selector2handler(){
    //comment here
};

function selector3click(){
    //comment here
};

function selector3mouseover(){
    //comment here
};

//add handlers

$(document)
    .on('mouseenter', 'selector1', selector1handler)
    .on({
        click : selector3click,
        mouseover : selector3mouseover
    },'selector3')
    .on('mouseleave', 'selector2', selector1handler)
share|improve this answer
    
Yeah, that's already what i did ;) However see my comment to @AlexeyLebedev –  yckart Dec 3 '12 at 14:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.