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

Question

我看了整個互聯網，每個人都給出了相同的答案

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

    });

代替

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

    });

如果你有點擊事件，這很好，它工作正常。 但是在點擊功能中，它所說的部分做了什么，我現在如何定位附加元素？ 例如，假設我背靠背追加2個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元素存在於dom中，點擊就可以了。 我唯一關心的是你已經用數字命名了你的類名。 也許用一個字母后跟一個數字命名。

Answer 2

2之間的區別在於event binding vs event delegation.的概念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/