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

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

    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?:

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

Now the usage is quite simpler:

    ['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?

  • 1
    \$\begingroup\$ 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 \$\endgroup\$ Dec 3, 2012 at 12:07
  • \$\begingroup\$ 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(). \$\endgroup\$
    – Flambino
    Dec 3, 2012 at 12:38
  • \$\begingroup\$ @AlexeyLebedev Nice! I think there was another problem then... In view of that fact were my questions probably unnecessary :P \$\endgroup\$
    – yckart
    Dec 3, 2012 at 14:08
  • \$\begingroup\$ @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. \$\endgroup\$
    – ANeves
    Dec 4, 2012 at 15:43

1 Answer 1

  • 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:


function selector1handler(){
    //comment here

function selector2handler(){
    //comment here

function selector3click(){
    //comment here

function selector3mouseover(){
    //comment here

//add handlers

    .on('mouseenter', 'selector1', selector1handler)
        click : selector3click,
        mouseover : selector3mouseover
    .on('mouseleave', 'selector2', selector1handler)
  • \$\begingroup\$ Yeah, that's already what i did ;) However see my comment to @AlexeyLebedev \$\endgroup\$
    – yckart
    Dec 3, 2012 at 14:10

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