Question

I have an element as show below:

<div id="treeTable123" class="collapsed">
<div id="test"></div>
</div>

I have binded on click function to div with id ‘test’ using jquery.
function1:

 $(document).delegate('#test', 'click', function(e){
   ....
 });

I have another binded click function to other elements as:
function2:

  $('[id^="treeTable"]').delegate('.collapsed', 'click', function(e){
  });

When I click div with id ‘test’ both events are fired. So I want to prevent the event in the function 2 on clicking on event inside function 1. How can i do that?

Answer 1

$('[id^="treeTable"]').delegate('.collapsed', 'click', function(e){
   if($(e.target).closest('#test').length === 0) {
      // code placed inside this condition is not executed on clicking the element #test
   }
});