Add jQuery click handler to multiple elements?

Question

I need to have a for loop inside my jQuery.

Example:

  for(i=0;i<counter;i++)
   {
    $("div"+i+"").click(function(){//some code});
   }

How can I accomplish this?

EDIT:

This code was posted by the OP in a comment to one of the answers:

$("#displayPanel div").click(function (){ alert($(this).attr("id")); } 

<div id="displayPanel" class="displayPanel"> 
  <div id="heading"> Display Panel </div> <br/> 
  <div id="save" class="saveClass"></div> <br/> 
  <div id="field1" class="my"> 
    <label id="labelstr1">Untitled1</label> 
    <input id="inputstr1" type="text"/> 
  </div> 
  <div id="field2" class="my"> 
    <label id="labelstr2">Untitled1</label> 
    <input id="inputstr2" type="text"/> 
  </div> 
</div>

The alert is showing me the id for the first two divs and not for the field1 and field2.

Note:

The Field1 and Field2 divs are created on the fly.

I have some 5 divs created...At the end if i click any one of the Div say Div1,i need to do some funtionality..Suggest me.... — useranon
– useranon, Commented Jun 3, 2009 at 10:16

fmsf · Accepted Answer · 2009-06-03 11:05:51Z

13

You can put the divs with a common class

<div id="d1" class="your_css_class your_control_class">
<div id="d2" class="your_css_class your_control_class">
<div id="d3" class="your_css_class your_control_class">
<div id="d4" class="your_css_class your_control_class">
<div id="d5" class="your_css_class your_control_class">

$(".your_control_class").click(function(){
   var div_id=$(this).attr("id"); // gives you the ID of the clicked div
   if(div_id==="d1") functionForDiv1();
   else if(div_id==="d2") functionForDiv2();
   ...
});

EDIT:

If you have everything inside that big div then you can do:

$("#displayPanel > div").click(function(){
...

edited Jun 3, 2009 at 11:05

answered Jun 3, 2009 at 10:27

fmsf

37.2k49 gold badges155 silver badges196 bronze badges

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

1 Comment

useranon Over a year ago

$("#displayPanel div").click(function (){ alert($(this).attr("id")); } <div id="displayPanel" class="displayPanel"> <div id="heading"> Display Panel </div> <br/> <div id="save" class="saveClass"></div> <br/> <div id="field1" class="my"> <label id="labelstr1">Untitled1</label> <input id="inputstr1" type="text"/> </div> <div id="field2" class="my"> <label id="labelstr2">Untitled1</label> <input id="inputstr2" type="text"/> </div> </div> Its showing me the id for the first Two divs and not for the field1 /field2

Jose Basilio · Accepted Answer · 2009-06-03 11:14:34Z

8

The loop seems unnecessary since the selector for div will apply to all divs.

$("div").click(function(){
  //this will apply to any div you click on the page
  //for example:
  $(this).css('color','red'); //change the color of the div clicked to red
});

EDIT: Since you mention in the edit that #field1 and #field2 are created on the fly, then you need to use .live() to bind the click event as shown below:

$("#displayPanel div").live('click', function(){
  alert($(this).attr('id'));
});

edited Jun 3, 2009 at 11:14

answered Jun 3, 2009 at 10:21

Jose Basilio

51.7k13 gold badges124 silver badges117 bronze badges

3 Comments

Noldorin Over a year ago

He doesn't necessarily want to apply to all divs.

cgp Over a year ago

Then he should use a class to specify which ones.

Noldorin Over a year ago

Or a custom attribute, as I suggest.

Philippe Leybaert · Accepted Answer · 2009-06-03 10:17:18Z

6

You can, for example, loop through all div's like this:

$("div").each(function() {
    $(this).hide(); // this points to the current element
});

answered Jun 3, 2009 at 10:17

Philippe Leybaert

172k33 gold badges213 silver badges224 bronze badges

2 Comments

useranon Over a year ago

If any of my field1 /field2/field3 /field4 are clicked i want to take corresponding action separately likebelow for(i=0;i<counter;i++){ $("#displayPanel #field"+i+"").click(function (){}); }//for loop

Fermin Over a year ago

Although using $.each() looks easier you get a performance hit compared to using a standard for loop. It's negligible for smaller loops but as the count increases it can be many times slower.

Russ Cam · Accepted Answer · 2009-06-03 10:35:34Z

1

Yes you can have a for loop in jQuery, but by the look of your question, you might not need it. When you use

$('div').click(function(). { ... });

You can bind the function as an event handler for all divs with one command. You can also use context, a class name or other attributes to filter the divs to which the event handler is applied.

If you wanted to perform a different action for each div, you would be best to have a unique ID on each div and then bind an event handler using

$('#divId').click(function() { ... });

edited Jun 3, 2009 at 10:35

answered Jun 3, 2009 at 10:25

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Elizabeth · Accepted Answer · 2012-09-17 14:32:08Z

1

Assuming the html is

<div class="module">
  <div id="header1">h</div>
  <div id="content1">c</div>
</div>
<div class="module">
  <div id="header2">h</div>
  <div id="content2">c</div>
</div>
<div class="module">
  <div id="header3">h</div>
  <div id="content3">c</div>
</div>

You can do loop this way with jquery: For example, when you click header, the content is hidden.

$(".module").each(function(index){
   $("#header"+index).click(function(){
      $("content"+index).hide()
   });
});

You may want to have a look at jQuery.each( collection, callback(indexInArray, valueOfElement) ) function http://api.jquery.com/jQuery.each/

answered Sep 17, 2012 at 14:32

Elizabeth

5411 gold badge4 silver badges9 bronze badges

Comments

Noldorin · Accepted Answer · 2009-06-03 10:23:05Z

0

Do these divs have a common parent, attribute, or anything else? Matching by IDs of a certain form (i.e. divXYZ in your case) probably isn't the easiest/most obvious thing to do. The API documentation for Selectors has a complete list of the different ways you can select elements. Choose whichever is most appropiate for, and the JQuery becomes much simplified.

Here's an example for selecting divs with a common parent:

$("#parent > div").click(function() {
    // some code
});

And for selecting divs with a common attribute (if they don't have a common parent one solution could be giving them each a cusotm attribute):

$("div[fooAttribute]").click(function() {
    // some code
});

answered Jun 3, 2009 at 10:23

Noldorin

148k56 gold badges273 silver badges308 bronze badges

Collectives™ on Stack Overflow

Add jQuery click handler to multiple elements?

EDIT:

Note:

6 Answers 6

1 Comment

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

Note:

6 Answers 6

1 Comment

3 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related