動態添加的div在被調用時不起作用

我正在嘗試創建div列表。當點擊新的圖層按鈕時，會創建一個具有唯一ID的新div。當我嘗試調用這些動態添加的div時，沒有響應。我很困惑，因爲現有的div工作。動態添加的div在被調用時不起作用

<input type="submit" id="newLayer" value="New Layer"> 

<div id="layersContainer" class="layerscontainer"> 
    <div class="layer" id="layer1">fadfa</div> 
    <div class="layer" id="layer2">2</div>    
</div> 


var newLayerCounter = 2; 
var layerID = ""; 
var layersArray = new Array(); 
var clickedElement = ""; 


function selectLayer(){ 

     $(clickedElement).css({"background-color":"yellow"}); 

    } 

$('#layersContainer div').on("click", function(){ 

    clickedElement = $(this).attr("id"); 
    alert(clickedElement); 
    selectLayer(); 

}); 

$('#newLayer').on("click", function(){ 

    newLayerCounter = newLayerCounter + 1; 
    layerID = "#layer"+ newLayerCounter; 

    $('<div/>', { 
    id: "layer"+ newLayerCounter, 
    class: "layer" 
    }).appendTo('#layersContainer'); 

    $(layerID).text('hey'); 

})

這裏是一個工作的jsfiddle

http://jsfiddle.net/Q3dSp/24/

來源

2013-02-22 user1551909

更改

$('#layersContainer div').on("click", function(){

到

$(document).on("click", '#layersContainer div', function() { 
    clickedElement = $(this).attr("id"); 
    alert(clickedElement); 
    selectLayer(); 
});

它被稱爲delegated event。

來源

2013-02-22 17:39:05 hjpotter92

他爲什麼不工作，雖然什麼？這不是jQuery事件代表團嗎？（他這樣做的方式） – 2013-02-22 17:46:48

@Joel_Blum啊！這是今天的第二個問題。再次忘記名字。老問題：[點擊插入文本到UL李]（http://stackoverflow.com/a/15027042/1190388） – hjpotter92 2013-02-22 17:49:14

它甚至是http://stackoverflow.com/questions/12829963/events-triggered-通過動態地生成的元件 - 被-未捕獲由事件手。我鼓勵大家能夠把這樣一個問題作爲鏈接問題的重複。 – 2013-02-22 17:53:06

鏈接嘗試用$('#layersContainer').on("click", "div", function(){ (...) });

http://jsfiddle.net/3hqfn/1/

來源

2013-02-22 17:38:05

變化：

$('#layersContainer div').on("click", function(){

與此：

$('#layersContainer').on("click", "div", function(){

來源

2013-02-22 17:38:17 Oden

-1

使用http://api.jquery.com/live/可能會訣竅！

當您動態地將元素添加到DOM時，.live（...）會自動添加事件處理程序。

來源

2013-02-22 17:39:52

'.live（）'已棄用！ – Oden 2013-02-22 17:41:06

從jQuery 1.7開始，不推薦使用.live（）方法。使用.on（）附加事件處理程序。老版本的jQuery用戶應優先使用.delegate（），而不要使用.live（）。此外，答案是使用.on（）時的調用順序。 – j08691 2013-02-22 17:41:20

嘗試用這一個：

$('#layersContainer').on("click", 'div', function(){ 
clickedElement = $(this).attr("id"); 
    alert(clickedElement); 
    selectLayer(); 
});

在這種情況下，你需要一個event delegation to existing closest parent時dom was ready.

來源

2013-02-22 17:40:56 Jai

動態添加的div在被調用時不起作用

回答

相關問題