如何使用Jquery或Javascript定位Appended元素，或者如何將添加的元素添加到DOM？

Question

我跟大家給予同樣的答案

 $(document).on('click', '#targetID', function() { 
     // do stuff 

    }); 

代替

​​

這是很好的，它工作正常，如果你有一個click事件找遍了整個互聯網。但是，在點擊功能，它所說的東西的部分，我現在如何定位一個附加元素？例如說，我將兩個div拼接起來。

<div id="mainDiv"></div> 

<script> 

socket.on('event', function (data) { 
    $('#mainDiv').append ('<div class="1st" id="'+data.id+'">one</div> 
    <div class="2nd" id="'+data.id+'">second</div>'); 
}); 

    $(document).on('click', '.1st', function() { 
     //and right here i would like to`enter something like 
     $('.2nd').css('background-color','yellow'); 
    } 

</scirpt> 

這似乎不工作，因爲據我所知，這個元素還沒有被添加到DOM。所以我該怎麼做？我應該使用angular.js嗎？

PS我也試着在追加變量之前先將全部附加內容添加到變量中。然後使用variable.find找到內部的元素無濟於事。變量只在該函數中具有上下文，但在點擊函數中爲null。預先感謝任何擴大我對此的理解的信息。

Answer 1

'on'代表團是正確的。一旦dom中存在div元素，點擊應該可以工作。我唯一擔心的是你已經命名你的類名以數字開頭。也許用一個字母后跟一個數字來命名它。

Answer 2

2之間的區別是event binding vs event delegation.

$('#targetID').click(function() {概念是event binding，其只要它們在當頁面或文檔加載的標記存在於元件的工作原理。

$(document).on('click', '#targetID', function() {是event delegation這意味着該事件會聽取文檔與ID targetID元素上的click事件，如果它的存在DOM加載頁面時，或者如果動態添加它。

所以在你的情況下，它的event delegation，因爲你是動態添加元素。但爲了使其工作，你需要註冊的document ready event聽者的文件，聽取他們對元素＃targetID

<script> 

    $(document).ready(function() // Add this 
    { 
     socket.on('event', function (data) { 
     $('#mainDiv').append ('<div class="1st" id="'+data.id+'">one</div><div class="2nd" id="'+data.id+'">second</div>'); 
     }); 

     $(document).on('click', '.1st', function() { 
      //and right here i would like to`enter something like 
      $('.2nd').css('background-color','yellow'); 
     }); 
    }); 

</script> 

這裏的事件是一個例子：https://jsfiddle.net/nobcp0L7/1/