jQuery: Refactoring into functions

Question

I'm messing about with JavaScript/jQuery, and just trying to determine how to refactor two very similar:

 $('#a-div-element').click(function() {
    /* common stuff in here */
})

into one function with two arguments. I'd expected it to be somewhat similar to other languages I've used, that is:

function my_refactored_stuff(field, target_div) {
  $(field).click(function{ 
    /* common stuff in here */
  });
}

But that doesn't seem to trigger when clicked

In short, if someone could do up a quick example of how to write up a function that handles common functionality across .click methods, I'd be really appreciative

Many thanks, PlankTon

At the moment, it's the actual element, eg $('#my-element')

PlankTon
– PlankTon

2012-09-11 01:21:49 +00:00
Commented Sep 11, 2012 at 1:21 — PlankTon
– PlankTon, Commented Sep 11, 2012 at 1:21

David G · Accepted Answer · 2012-09-11 01:24:36Z

2

var callback = function() {};

$('#a-div-element').click( callback );

Or if you wish to pass arguments:

$('#a-div-element').click(function() {
    callback( /* args */ );
});

answered Sep 11, 2012 at 1:24

David G

97.6k41 gold badges173 silver badges258 bronze badges

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

Comments

Chris Heald · Accepted Answer · 2012-09-11 01:19:20Z

2

Just define and re-use an event handler function.

var handler = function(event) { /* common stuff here */ }
$("#a-div-element").on("click", handler)
$("#b-div-element").on("click", handler)

answered Sep 11, 2012 at 1:19

Chris Heald

62.9k10 gold badges131 silver badges143 bronze badges

2 Comments

PlankTon Over a year ago

Looks promising, but how do I pass in arguments?

Chris Heald Over a year ago

You don't pass arguments to an event handler; the argument is always the DOM event object. What kinds of arguments are you wanting to pass? If you need custom behavior per element, then you will need a custom function per handled event, but you can move common functionality into a separate function if needed.

Collectives™ on Stack Overflow

jQuery: Refactoring into functions

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related