7

i have two different divs (code was simplified, this is not the actual code.)

<div id="test"></div>
<div id="funt"></div>

what i want is, to attach the same click event to #funt: something like:

$('#test').click(function() {
    DoWork();
});
$('#funt).click(function() {
    DoWork();
});

function DoWork(){
    alert('yes');
}

but isn't there a way to define multiple div's the same click event?

lets say ( yes, i know this does not work! )

($('#test'),('#funt')).click(function(){alert('yes')});

Cœur
  • 37,241
  • 25
  • 195
  • 267
Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93

6 Answers6

20

Simply:

$("#test, #funt").click(DoWork);

See Multiple Selector.

karim79
  • 339,989
  • 67
  • 413
  • 406
0

You can try this syntax to do so,

When working with Classes

$(".className1, .className2, .classNameN").on('click', function(){
    Do_Some_Work();
});

When working with Id's

$("#ID1, #ID2, #IDN").on('click', function(){
    Do_Some_Work();
});

When working with Combination of ID and Class

<div id="z">z
    <div class="w">w</div>
    <div class="x">x</div>
   <div class="y">y</div>
</div>

$('#z.w , #z.y').on('click', function(){
    Do_Some_Work();
    //Pointer come here only when it click on `W` and `Y`
});
Ajay Gupta
  • 2,867
  • 23
  • 28
0

This should work

($('#test','#funt')).click(function(){alert('yes')});

http://api.jquery.com/multiple-selector/

Rafael Herscovici
  • 16,558
  • 19
  • 65
  • 93
ysrb
  • 6,693
  • 2
  • 29
  • 30
0

Assign a class to your div's, and then assign the click event using the class like this:

<div class="clickable" id="test"></div>
<div class="clickable" id="funt"></div>

Then

$('.clickable').click(function()
{
    DoWork();
});

You could also list the id's like this:

$("#test, #funt").click(DoWork);

I usually try to use classes because it's cleaner when you're dealing with multiple divs - you don't have to list the ID of each.

James Hill
  • 60,353
  • 20
  • 145
  • 161
  • you have to understand that sometimes it is not possible to make changes to code. recommendation of adding/removing classes is usually good for a new started site, not for a site with over 6000 pages. – Rafael Herscovici Jul 18 '11 at 12:26
  • @Dementic, You should understand that without that type of information being in the original question, you'll get answers like mine. Please note, I presented two options, one where a markup change was required, and one where it was not. Based on your original question (that contained no information about not changing the markup), I think this was a good approach :) – James Hill Jul 18 '11 at 12:29
  • i didnt ment any harm... english is not my native language, and im sorry if sometimes i sound harsh ;). but i really think that as a programmer, you should allways first consider options with no markup change, and only if it is not possible, consider other options. – Rafael Herscovici Jul 18 '11 at 13:01
  • 1
    @Dementic, no offense taken. My response was simply an encouragment to put more information in your original question (and an attempt to get an up-vote). – James Hill Jul 18 '11 at 13:18
0

You were actually pretty close: 

 $('#test, #funt').click(function() {
      });
vcsjones
  • 138,677
  • 31
  • 291
  • 286
0

You have two options, either you could give both of those divs a class and then just run the code:

$(".myclass").click(function() {
    DoWork();
});

Or you could define a function like:

function hookClick(arr, handler)  {
    foreach (var i in arr) {
        $(i).click(handler);
    }
}

then run it using

hookClick(["#div1", "#div2"], function() { /*do sth cool })
Fed44
  • 194
  • 3