Question

I’m sure this will be a simple question but I still struggle with DOM selectors in Jquery so here is a model of my html code:

<fieldset class="product-options" id="product-options-wrapper">
   <ul class="options-list">
      <li><a href>Item1.1</a></li>
      <li><a href>Item1.2</a></li>
      <li><a href>Item1.3</a></li>
   </ul>

   ...other html items here

   <ul class="options-list">
      <li><a href>Item2.1</a></li>
      <li><a href>Item2.2</a></li>
      <li><a href>Item2.3</a></li>
   </ul>

</fieldset>

Now how do I select all of the ‘li a’ items in both lists (or X number of lists) with class name .options-list and bind them with a click function.

Currently I have:

$('fieldset#product-options-wrapper ul.options-list > li a').bind('click', function(e) {
     //code here
});

And it only gets the first options-list.

Thanks, greatly appreciated!

EDIT: If i click on a Item2.X list item first, then it will grab that options list. But as soon as I click on the Item1.x list items it disregards the second .options-list

Answer 1

If you are going to bind to each li element, you should bind it to the ul element instead (helps greatly with performance when there are a lot of events).

$('.options-list', '#product-options-wrapper').bind('click', function(e)
{
   e.preventDefault();//In case you don't want to go to a different page
   var clicked = e.target;//The href that was clicked
   /* If you only want this to happen if the a tag was clicked, add the following line
   if(clicked.tagName == 'A')*/
   //Rest here
});