Better way to bind events in jQuery

Question

I am looking for a better way to bind multiple events to a single element in jQuery. I am trying to avoid writing multiple $(element).bind('event', ...) or $(element).event(...) statements.

Code

// old way    
var textbox = $('input');
$(textbox).focus(function() { ... }
$(textbox).blur(function() { ... }

// new way
$(textbox).extend({
    focus: function() {
           ...
    },
    blur: function() {
            ....
    }
});

Unfortunately, this implementation is not working. Does anyone have a better suggestion? Thank you.

@AbeMiessler, his "new way" it is not working because he's trying to extend the jQuery object with methods named after the events. However, this won't bind the events. — bfavaretto
– bfavaretto, Commented Mar 19, 2012 at 14:53

Anthony Grist · Accepted Answer · 2012-03-19 15:06:01Z

9

All of the answers so far assume you want to bind the same callback function to multiple events. If that's not the case, consider using .on() with an event map:

$('selector').on({
    focus: function(e) {
        // do something for focus
    },
    blur: function(e) {
        // do something else entirely for blur
    },
    ...
}

answered Mar 19, 2012 at 15:06

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Hill Over a year ago

Actually, several answer explained how to do this (including mine), just in a different way (using e.type). This is actually my preferred method so that common elements or logic can be easily shared between the handlers.

Rory McCrossan · Accepted Answer · 2012-03-19 14:51:39Z

3

Try this:

$("textbox").bind('focus blur', function() {
    // your code
});

For jQuery 1.7+ bind has been superceded by on:

$("textbox").on('focus blur', function() {
    // your code
});

In both of these cases, the function specified will be run on all events listed in the first parameter.

answered Mar 19, 2012 at 14:51

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Comments

James Hill · Accepted Answer · 2012-03-19 14:57:36Z

3

Use jQuery's .on() method:

$('input').on("focus blur", function () {
});

If you need to execute conditional logic based on the event:

$('input').on("focus blur", function (e) {
    var whichEvent = e.type; // Will be "focus" or "blur"
});

edited Mar 19, 2012 at 14:57

answered Mar 19, 2012 at 14:52

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

Comments

Christoph · Accepted Answer · 2012-03-19 14:52:40Z

0

You can use

<element>.on("eventhandlers as commaseparated list",function(){})

if you can use one function for all those handlers, or

element.click(...)
       .<anotherhandler>(...)
       .<yetanother>(...)

if you need different functions.

.on()is the preferred way though.

answered Mar 19, 2012 at 14:52

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Comments

Billy Moon · Accepted Answer · 2012-03-19 14:54:46Z

0

// My way
var textbox = $('input');
$(textbox).on('focus blur', function(e){
  if (e.type == 'focus'){
    // do the focus stuff
  } else if (e.type == 'blur'){
    // do the blur stuff
  }
}

This is untested, but the principle holds

answered Mar 19, 2012 at 14:54

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

Comments

Vimalnath · Accepted Answer · 2012-03-19 14:54:49Z

0

You can make you use of bind function in jquery:

Ex:

$(textbox).bind('focus blur',function(){
  //do something
 });

answered Mar 19, 2012 at 14:54

Vimalnath

6,4732 gold badges29 silver badges47 bronze badges

Comments

Dave · Accepted Answer · 2012-03-19 14:54:49Z

0

Once you've saved a jQuery object in a variable, you don't need to keep converting it to a jQuery object over and over. You can also "chain" your event bindings, since they return the original object.

Try something like this:

var $textbox = $('input');  // (Use a $ to mark variables that hold jQuery objects
$textbox
    .on("focus", function() { ... })
    .on("blur", function() { ... });

(Also, make sure you check that you're using the right event names... I have no idea how much time I've wasted hunting bugs that were because I made up my own name for an event.)

answered Mar 19, 2012 at 14:54

Dave

4,4223 gold badges26 silver badges30 bronze badges

Collectives™ on Stack Overflow

Better way to bind events in jQuery

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related