如何使用 Jquery 或 Javascript 定位附加元素，或者如何将该附加元素添加到 DOM？答案

【问题标题】：How can I either target an Appended element using Jquery or Javascript, or how can I add that appened element to the DOM?如何使用 Jquery 或 Javascript 定位附加元素，或者如何将该附加元素添加到 DOM？
【发布时间】：2017-03-25 04:35:11
【问题描述】：

我查遍了整个互联网，每个人都给出了相同的答案

     $(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 在其中查找元素无济于事。该变量仅在该函数中具有上下文，但在单击函数中为空。在此先感谢您提供任何可以拓宽我对此理解的信息。

【问题讨论】：

标签： javascript jquery html css socket.io

【解决方案1】：

'on' 的委托是正确的。一旦 div 元素存在于 dom 中，单击应该可以工作。我唯一担心的是你的班级名称以数字开头。也许用一个字母字符后跟一个数字来命名它。

【讨论】：

【解决方案2】：

两者的区别在于event binding vs event delegation.的概念

$('#targetID').click(function() { 是 event binding，只要元素在页面或文档加载时存在于标记中，它就可以工作。

$(document).on('click', '#targetID', function() { 是event delegation，这意味着如果页面加载时 DOM 中存在或动态添加的 ID 为 targetID 的元素上的 click 事件，该事件将侦听文档。

所以在您的情况下，它是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/

【讨论】：