jquery - attach .click() to multiple variables

Question

I have the following code:

var buttonOne = $("#buttonOne");
var buttonTwo = $("#buttonTwo");

// opens an already initialized modal window 
(buttonOne, buttonTwo).click(function()
{
    modalBoxContainer.dialog("open");
});

This is not working. It will work if I use the elements, but not with the variables.

Any ideas?

are you missing the $? your example is.

Homer
– Homer

2012-05-11 20:32:42 +00:00
Commented May 11, 2012 at 20:32 — Homer
– Homer, Commented May 11, 2012 at 20:32
I was but that does not make a difference in this case.

IntricatePixels
– IntricatePixels

2012-05-11 20:43:29 +00:00
Commented May 11, 2012 at 20:43 — IntricatePixels
– IntricatePixels, Commented May 11, 2012 at 20:43

user400654 · Accepted Answer · 2012-05-11 20:28:19Z

9

Use the .add method.

buttonOne.add(buttonTwo).click(...);

answered May 11, 2012 at 20:28

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

9 Comments

Mathew Thompson Over a year ago

FYI combined selector is approximately 42% faster than add Source: jsperf.com/selector-vs-add/5

user400654 Over a year ago

Agreed, but what if the selectors aren't available to be combined?

user400654 Over a year ago

He already has both elements cached, how does that affect the outcome of the jsperf, assuming that the cached selections aren't used but have already been made?

Mathew Thompson Over a year ago

Based on the fact that his only usage of the objects is in the event declaration in the given code, arguably it's overhead that he's got those variables in the first place. That's unless he has omitted code that uses said variables of course.

Mathew Thompson Over a year ago

Plus if he did use them, arguably using $("#" + buttonOne.attr("id") + ", " + "#" + buttonTwo.attr("id")) would still be faster than add

|

Mathew Thompson · Accepted Answer · 2012-05-11 20:26:48Z

5

Try combining the selector?

$("#buttonOne, #buttonTwo").click(...

Although you should really use on (jQuery 1.7) or delegate for pre-1.7, this will create the one event for all elements in the handler. Something like:

$(document).on("click", "#buttonOne, #buttonTwo", function () {
    //function here
});

on documentation: http://api.jquery.com/on/

delegate documentation: http://api.jquery.com/delegate/

answered May 11, 2012 at 20:26

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

9 Comments

gen_Eric Over a year ago

I wouldn't use "delegated" events for this. They are "live" events, which I don't think is really needed here. $("#buttonOne, #buttonTwo").click is the way to go.

Mathew Thompson Over a year ago

Well with the delegate you'll only have 1 event, with the click you'll have one for each element wouldn't you? :)

user400654 Over a year ago

@mattytommo true, however any time you click anywhere in the document it's going to have to check the event.target against those two ids.

Mathew Thompson Over a year ago

@KevinB Arguably a better overhead than having duplicate events though? :)

IntricatePixels Over a year ago

i'm leaning towards just using two selectors ($("#buttonOne, #buttonTwo").click(...), but is there a benefit to first assigning the selectors to a variable vs. directly using the selectors for .click()?

|

Collectives™ on Stack Overflow

jquery - attach .click() to multiple variables

2 Answers 2

9 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related