Only one jQuery click event for div with same class name
<p>There are two <code>div</code> sections with the same class and also has same <code>ul</code> and <code>li</code> and <code>a</code>. </p>

<p>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?</p>

<p>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:</p>

<pre><code>&lt;div class = "abc"&gt;
 &lt;ul&gt;  
  &lt;li class="year_"&gt;&lt;a href="www.google.com"&gt;google&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div class ="abc"&gt;
 &lt;ul&gt;
  &lt;li&gt;&lt;a href="www.yahoo.com&gt;yahoo&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

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

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

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