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

Posted 2023-04-18

【中文标题】如何使用 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?

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

【参考方案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/