jQuery Forum

Here is my test code:

1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
   
   <div>
       <div id="a">
           <div class="foo">foo</foo>
           <div class="bar">bar</foo>
       </div>
       <div id="b">
           <div class="foo">foo</foo>
           <div class="bar">bar</foo>
       </div>
   </div>
   
   <script language="javascript" type="text/javascript">//<![CDATA[
   
       $('#a').find('.foo, .bar').live('click', function(event){
           alert('clicked a -> foo/bar');
       });
   
       $('#b').find('.foo, .bar').live('click', function(event){
           alert('clicked b -> foo/bar');
       });
   
   //]]></script>
   
   

My expected outcome is:

1. click on any "foo" or "bar" div above and receive one alert

Actual outcome is:

2. clicking on the first div is fine, but the other three produce two alerts (one from each .live() call)

Note:

I realise I can change the selectors to be like "#a .foo, #a .bar", but this is isolated test code; the actual code in the project I am working is a bit more complicated, e.g.:

builder.find('.rule .ruleCopy, .rule .ruleAdd').live(...)

(where `builder` is a reference to a div which is set up much earlier in the piece)

Environment:
jquery 1.4.2 minified
firefox 3.5.8