Tutorial :Add jQuery click handler to multiple elements?


I need to have a for loop inside my jQuery.


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

How can I accomplish this?


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.


The Field1 and Field2 divs are created on the fly.


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();     ...  });  


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

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


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


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

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


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() { ... });  


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/


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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »