Question

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

points

而不是

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

    });

这很好，如果你有一个点击事件，它工作正常。但是在点击功能中，它所说的部分做了什么，我现在如何定位附加元素？例如，假设我背靠背追加2个div。

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

    });

然而，这似乎不起作用，因为据我所知，这个元素尚未添加到DOM中。所以我该怎么做？我应该使用angular.js吗？

PS我还尝试在附加该变量之前先将所有附加内容添加到变量中。然后使用variable.find查找其中的元素无济于事。变量仅在该函数中具有上下文，但在单击函数中为null。提前感谢任何能够扩大我对此的理解的信息。

Answer 1

＆＃39; on＆＃39;是正确的。一旦dom元素存在于dom中，点击就可以了。我唯一关心的是你已经用数字命名了你的类名。也许用一个字母后跟一个数字命名。

Answer 2

2之间的区别是event binding vs event delegation.

的概念

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

$(document).on('click', '#targetID', function() {是event delegation，这意味着如果页面加载时DOM中存在click事件，那么该事件将侦听文档中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/

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

2 个答案: