Question

given this HTML,

<div id="dd_container" class="dd dd_container">
 <ul class="dd_deploy">
   <li class="dd_deploy">
     more options
   </li>
  </ul>
 <ul class="dd">
   <li class="dd">
     el1
   </li>
   <li class="dd">
     el2
   </li>
   <li class="dd">
     el3
   </li>   
 </ul>
</div>​

why does this jquery function print to the console two times?

$(document).on('click','.dd_deploy', function(){
    console.log($(this).parents('.dd_container').children('ul.dd'));
});​

http://jsfiddle.net/mBPfG/

Answer 1

Because you have 2 .dd_deploy elements, one nested inside the other so the event is bubbling.

<ul class="dd_deploy">
    <li class="dd_deploy">
        more options
    </li>
</ul>

If this HTML structure is intended, you can use event.stopPropagation to prevent the event bubbling, like this:

$(document).on('click','.dd_deploy', function(e){
    e.stopPropagation();
    console.log($(this).parents('.dd_container').children('ul.dd'));
});​

Note also that having $(document) as the primary selector on a delegated event handler is not the ideal for performance. Instead of document use the nearest element which is not appended to the DOM dynamically.