Only one jQuery click event for div with same class name

Question

There are two div sections with the same class and also has same ul and li and a.

I have two jQuery click events in my code. When I click Google both of the jQuery click events fire. But I do not want both to do so, only one. How do I achieve this?

For example, if Google gets clicked I want only that jQuery click event to do something, not the other one. These are the DOM element I am working with:

<div class = "abc">
 <ul>  
  <li class="year_"><a href="www.google.com">google</a></li>
 </ul>
</div>
<div class ="abc">
 <ul>
  <li><a href="www.yahoo.com>yahoo</a></li>
 </ul>
</div>

The href might change so I cannot base my selector on that. The code that I have follows.

$( 'div.abc ul li[class^="year_"]  a' ).click( function(){
    //do something
});

$( 'div.abc ul li a' ).click( function(){
    //do something
});

You could just add an unique ID to each link, it'd make reading those selectors much easier IMO. — Fabrício Matté
– Fabrício Matté, Commented May 11, 2012 at 23:40
I'm sure jQuery's $.is() or $.not() could come in handy, including maybe even with just one handler... — Jared Farrish
– Jared Farrish, Commented May 11, 2012 at 23:45
ul. is a mistake I removed it from the question. it should have been just ul — Do Good
– Do Good, Commented May 12, 2012 at 1:05

Jared Farrish · Accepted Answer · 2012-05-11 23:58:30Z

5

You could do a conditional statement, finding the li with the "year_" class:

$( 'div.abc ul li a' ).click( function(){
    if ($(this).parents('li').is('[class^="year_"]')){
        //do something
    } else {
        //do something else
    }
});

See jsfiddle.

edited May 11, 2012 at 23:58

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

answered May 11, 2012 at 23:43

bozdoz

12.9k8 gold badges74 silver badges100 bronze badges

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

3 Comments

Ohgodwhy Over a year ago

This is the appropriate way to tackle the question. +1

Jared Farrish Over a year ago

I agree (see comment above): jsfiddle.net/EFkUp (And I did see the edit... ;))

Jared Farrish Over a year ago

The stray ul. period selector should be removed from the example code, as well.

Collectives™ on Stack Overflow

Only one jQuery click event for div with same class name

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