CODEWITHSUNDEEP
jqueryeventsbind
mavame
mavame

Reputation: 399

Better way to bind events in jQuery

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.

Upvotes: 3

Views: 4493

Answers (7)

Anthony Grist
Anthony Grist

Reputation: 38345

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
    },
    ...
}

Upvotes: 9

James Hill
James Hill

Reputation: 61792

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"
});

Upvotes: 3

Dave
Dave

Reputation: 4414

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.)

Upvotes: 0

Vimalnath
Vimalnath

Reputation: 6463

You can make you use of bind function in jquery:

Ex:

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

Upvotes: 0

Billy Moon
Billy Moon

Reputation: 58521

// 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

Upvotes: 0

Christoph
Christoph

Reputation: 51191

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.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 3

Related Questions