<div id="addCompaniesModal">
    <div id="addCompany_map"></div>
    <div class="addMarkerBtn"></div>
</div>

Hi there when i click on the child addCompany_map the parent addCompaniesModal should not be called ... I have done something like this.. but for some reason it didnt work..and parent div is getting selected on clicking on child can some one please explain me the solution

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$('#addCompaniesModal').click(function(){
});

<div id="addCompaniesModal">
    <div id="addCompany_map"></div>
    <div class="addMarkerBtn"></div>
</div>

Hi there when i click on the child addCompany_map the parent addCompaniesModal should not be called ... I have done something like this.. but for some reason it didnt work..and parent div is getting selected on clicking on child can some one please explain me the solution

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$('#addCompaniesModal').click(function(){
});

• javascript
• jquery

• I've made an update to my answer based on some of your ments, so do check it out.. – Ivan Ferić Commented Nov 29, 2012 at 0:56

5 Answers 5

Event propagation is happening from the child elements to parent elements.

It may look like your first line is handling the click on the child div but the way you specified it actually handles the click on the document level (because your selector is $(document)) and it only calls the method if it happened on the child div (the on('click','#addCompany_map' part). Since the document is parent to addCompaniesModal div, it's click handler will fire after the one used on addCompaniesModal div.

In order for this to work, you'll need to change the code to this:

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

$('#addCompaniesModal').click(function(){

});

EDIT:

I've seen in some of your ments that the main reason you're using $(document).on('click', ... approach is because you're adding child divs dynamically.

In that case, there are 2 viable approaches to handling your problem.

First approach is for you to also dynamically add child div handler, and unbind upon removal. You could use this approach:

function dynamicallyAddChildren(){
  var oldChildDiv = $('#addCompany_map');
  if (oldChildDiv.length > 0)
    oldChildDiv.off('click', handleChildDiv);
  // remove old child if needed and add new child divs
  newChildDiv.on('click', handleChildDiv);
}

function handleChildDiv(e){
  //do something
  e.stopPropagation();
}

$('#addCompaniesModal').click(function(){
});

Second approach is to use $(document).on('click', ... approach with both child and parent divs like this:

$(document).on('click','#addCompany_map', function (e) {
    e.stopPropagation();
});

$(document).on('click','#addCompaniesModal', function(){
});​

I think:

$("#addCompany_map").click(function(){
  return false;
});

You have a click event on #addCompaniesModal, which includes #addCompany_map. Therefore by clicking on the child you're also going to click on the parent.

It seems you need to ask yourself what you want to acplish here. I would remove the click event on the parent if you want something specific to happen to the child inside the parent. If you want to have a click event on another object inside the parent that isn't #addCompany_map, such as .addMarkerBtn, then do that. But the way you have it above won't work.

Use delegation and check for the target element . That should solve your problem..

That way you can handle all the three div click events in a single handler..

$('body').on('click','#addCompaniesModal',function(e) {

    if (e.target.id === 'addCompany_map') {
        alert('Clicked Map Div !!')
    }
    else if (e.target.className === 'addMarkerBtn') {
        alert('Clicked Marker Div !!')
    }
    else {
        alert('Parent Div !!')
    }
});​

Check Fiddle

Use this expression as the simplest solution for your issue:

$('#addCompaniesModal').on('click','div', function (e) {
    console.log(e.target.id || e.target.className);
    e.stopPropagation();
});

This also improves the performance, as the reference says: try to avoid excessive use of document or document.body for delegated events on large documents. You're killing 2 birds with one stone thus.

Second expression can can stay as is:

$('#addCompaniesModal').click(function(){
});

By the way: .click(handler) is a shortcut of .on("click", handler).