如何在孩子的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

回答

相關問題