jquery loop through divs and bind events

Question

I have the below html. Could you tell me how do I use jquery to loop through each query_chunk divs and bind different events to each element inside the div?

I know I can use the .each function, but am stuck on the syntax. Any ideas appreciated.

                <div id="query_chunk_1">
                    <select class="parameter" id="parameter_1" name="parameter_1">
                        <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                        <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                        <option title="Title" value="Title">Title</option>
                        <option title="Subject" value="Subject">Subject</option>
                    </select>
                    <input id="keyword_1" name="keyword_1" type="text" />
                    <a href="#"  id="remove_1"  title="Remove">[-]
                        </a>
                </div>
                <div id="query_chunk_2">
                    <select class="parameter" id="parameter_2" name="parameter_2">
                        <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                        <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                        <option title="Title" value="Title">Title</option>
                        <option title="Subject" value="Subject">Subject</option>
                    </select>
                    <input id="keyword_2" name="keyword_2" type="text" />
                    <a href="#"  id="remove_2"  title="Remove">[-]
                        </a>
                </div>

Orson · Accepted Answer · 2010-12-22 09:23:26Z

4

Keyword Anywhere Author or Contributor Title Subject [-]

            <div id="query_chunk_2" class="con">
                <select class="parameter" id="parameter_2" name="parameter_2">
                    <option title="Keyword Anywhere" value="Anywhere">Keyword Anywhere</option>
                    <option title="Author or Contributor" value="Contributor">Author or Contributor</option>
                    <option title="Title" value="Title">Title</option>
                    <option title="Subject" value="Subject">Subject</option>
                </select>
                <input id="keyword_2" name="keyword_2" type="text" />
                <a href="#"  id="remove_2"  title="Remove">[-]
                    </a>
            </div>


$(function() {
     $("div.con").each(function() {
          $(this).live('eventname', functionname);
     });
});

Also take note that i added classes to the divs. You can also bind to an event using .bind instead of .live

$(this).bind('eventname',function(event){alert('Hi there!');});

Also note the in the first example i used "functionname where it is an actual function on your script file but in the bind case i embedded the function in the syntax. You can use any. You can even have;

$(this).live('eventname',function(event){alert('Hi there!');});

Update #1

To bind to individual controls use:

$(function() {
         $("div.con").each(function() {
              $(this).find("elementId").live('eventname', functionname);
         });
    });

edited Dec 22, 2010 at 9:23

answered Dec 22, 2010 at 9:12

Orson

15.5k12 gold badges60 silver badges72 bronze badges

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

3 Comments

itsbalur Over a year ago

thanks, but how do I bind different events to individual controls inside the div? For e.g I need to bind a 'change' event for the dropdown and 'keyup' and 'mouseup' event to the textbox?

itsbalur Over a year ago

thanks again. I am not getting this to work, what could be wrong? $("div.con").each(function (index) { $(this).find("remove_2").live("click", function () { alert("click event fired"); });

Orson Over a year ago

You are missing "});" at the end.

Collectives™ on Stack Overflow

jquery loop through divs and bind events

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related