如何使用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/