如何在孩子的div

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

您好点击时取消绑定父div的单击事件时，我对孩子addCompany_map父......我做了这样的事情addCompaniesModal不应该被称为单击。。但由于某种原因它没有work..and父DIV越做越点击选择孩子能有一个人请解释我的解决方案如何在孩子的div

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

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

来源

2012-11-28 troy

我已根据您的一些评论对我的答案进行了更新，因此请检查一下。 –

事件传播从子元素发生到父元素。

它可能看起来像你的第一行是处理点击子div，但你指定的方式实际上处理点击文档级别（因为你的选择器是$(document)），它只调用方法，如果它发生在子div（on('click','#addCompany_map'部分）。由于该文档是addCompaniesModal div的父项，因此在点击处理程序将在addCompaniesModal div之后触发。

为了这个工作，你需要更改代码这样：

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

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

});

编辑：

我在你的一些评论认为，主要见过您使用$(document).on('click', ...方法的原因是因为您要动态添加子div。

在这种情况下，有两种可行的方法来处理您的问题。

第一种方法是让您也动态添加子div处理程序，并在删除时解除绑定。你可以使用这种方法：

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(){ 
});

第二种方法是使用$(document).on('click', ...方法既孩子和家长的div像这样：

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

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

来源

2012-11-28 23:53:59

嗨伊万谢谢你的答复我试着你的第二种方法它也一样......可以你让你的第一个方法更清晰....谢谢 – troy

该方法基于在创建子div时动态添加点击处理程序。函数'handleChildDiv（e）'是你目前用于'addCompany_map'点击事件的函数。它是明确定义的，所以你可以绑定和解除绑定点击事件。（'click'，handleChildDiv）;'。'（'＃addCompany_map'）。函数'dynamicallyAddChildren'只是为了展示如何使用这个 - 当你创建addCompany_map' div时，你应该调用$（'＃addCompany_map'）。如果你从代码中的任何位置删除它的父代，你应该用'$（'＃addCompany_map'）解除事件绑定。'off'（'click'，handleChildDiv）;' –

我已经创建了这个提琴，所以你可以看得更清楚 - http://jsfiddle.net/fera/HPmyM/。您可以使用'添加div'按钮来动态添加您的div和'删除div'按钮来删除它们.. –

我想：

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

来源

2012-11-28 23:48:09 wf9a5m75

您有#addCompaniesModal的点击事件，其中包括#addCompany_map。因此，通过点击孩子，你也要点击父母。

看来你需要问问自己你想在这里完成什么。如果您想要父项内的子项发生特定的事情，我会删除父项上的click事件。如果您希望在父级中的另一个对象（不是#addCompany_map，如.addMarkerBtn）上有一个单击事件，请执行此操作。但是，你拥有它的方式是行不通的。

来源

2012-11-28 23:50:30 zeMinimalist

使用代表团并检查目标元素。这应该解决您的问题..

这样，你可以处理在一个处理所有三种格单击事件..

$('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

来源

2012-11-28 23:53:09

嗨，我尝试了您的方法，但它无法工作，因为我的addCompany_map和addMarkerBtn是动态添加的..... – troy

哪里我点击其去其他案件...可能是因为...我的孩子divs动态添加... – troy

用这句话作为您的问题最简单的办法：

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

这也提高了性能，因为reference说：尽量避免过度使用文档或文档ent.body在大型文档上进行委派事件。因此你一石二鸟。

第二表达可能原封不动：

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

By the way：.click(handler)是.on("click", handler)的快捷方式。

来源

2012-11-29 09:22:46 jwaliszko

如何在孩子的div

回答

相关问题