Question

I have a div like this…

<div class="user">
     <div class="info">
     .....
     </div>
     <div class="edit">
        Edit
     </div>
</div>

ON jquery I have something like this:

 $('user').click(function(){...});
 $('edit').click(function(){...});

If I click on “edit” both functions execute, I dont want that, if I click on “edit” only his function should happen.
Any ideas on how to separate this 2 functions?

Thanks

Answer 1

$('.edit').click(function(e){
   e.stopPropagation();
});

Your selectors are wrong, you have to put . before class names like .edit, .user.

More here Class Selectors

.stopPropagtion()

You can use .on too like which will work for dynamically added elements too   

$('body').on('click','.edit',function(e){
      e.stopPropagation();
});

Note

You can replace body with any static parent that will always exist in dom. The closer the parent element the better it will perform.