定位没有点击处理程序的动态添加元素 | 定位没有点击处理程序的动态添加元素

本文介绍了定位没有点击处理程序的动态添加元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

$ p

HTML：

 < body> 
< div class =container> 
< figure class =special_imagesdata-effect =zoomdata-profiles =testdata-options =some options> 
< img data-src =specialImage0.jpg/> 
< img data-src =specialImage1.jpg/> 
< img data-src =specialImage2.jpg/> 
< img data-src =specialImage3.jpg/> 
< img data-src =specialImage4.jpg/> 
< / figure> 
< div class =normal_images> 
< img src =normalImage0.jpg/> 
< img src =normalImage1.jpg/> 
< / div> 
< / div> 
< / body>

special_image 图中的所有内容将由外部页面加载更改脚本，所以我对此没有影响（否则我的所有问题都不会存在）。

由外部脚本操纵的HTML：

 < body> 
< div class =container> 
< figure class =special_images thumbs-bottomdata-effect =zoomdata-profiles =testdata-options =some options> 
< div class =some classes> 
< div> 
<！ - 多层添加内容 - > 
< / div> 
< div class =缩略图缩略图水平> 
< div class =缩略图缩略图水平> 
< div class =thumbnailails-wrapper> 
< ul style =some styles> 
< li class =thumbnail-selected>< img src =specialImage0？someParameters>< / li> 
< li>< img src =specialImage1.jpg？someParameters>< / li> 
< li>< img src =specialImage2.jpg？someParameters>< / li> 
< li>< img src =specialImage3.jpg？someParameters>< / li> 
< li>< img src =specialImage4.jpg？someParameters>< / li> 
< / ul> 
< / div> 
< / div> 
< / div> 
< / div> 
< / figure> 
< div class =normal_images> 
< img src =normalImage0.jpg/> 
< img src =normalImage1.jpg/> 
< / div> 
< / div> 
< / body>

外部脚本添加了所有这些元素后，我需要追加 正常图像进入脚本创建的无序列表。

jQuery似乎找不到添加元素当我试图定位他们，即使我延迟功能，等待外部脚本完成工作。

我没有找到任何解决方案，这样做，我希望有人能帮助我。
jQuery on（）在这里不行，内容应该被自动移动，并且不会被点击处理程序触发。

提前感谢任何提示或线索。

解决方案

您可以以检测何时外部脚本已经修改了special_images元素。

  var targetNodes = $ .special_images）; var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver（mutationHandler）; var obsConfig = {childList：true，characterData：false，attributes：false，subtree：true}; // ---向观察者添加一个目标节点。只能在一个时间添加一个节点targetNodes.each（function（）{myObserver.observe（this，obsConfig）;}）; function mutationHandler（mutationRecords）{if（$（'。thumbnailails-wrapper'）。length）{ myObserver.disconnect（）; $（'。thumbnailails-wrapper ul'）。append（$（'。normal_images img'）。detach（））; }} setTimeout（function（）{$（'。special_images'）。append（'< div class =thumbnailails-wrapper>< ul>< / ul>< / div>'）}，3000 ）;

 < script src =https：// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><body> < div class =container> < div class =special_imagesdata-effect =zoomdata-profiles =testdata-options =some options> < img data-src =specialImage0.jpg/> < img data-src =specialImage1.jpg/> < img data-src =specialImage2.jpg/> < img data-src =specialImage3.jpg/> < img data-src =specialImage4.jpg/> < / DIV> < div class =normal_images> < img src =normalImage0.jpg/> < img src =normalImage1.jpg/> < / DIV> < / div>< / body>

How can I target and append content to already dynamically added content?

HTML:

<body>
    <div class="container">
        <figure class="special_images" data-effect="zoom" data-profiles="test" data-options="some options">
            <img data-src="specialImage0.jpg"/>
            <img data-src="specialImage1.jpg"/>
            <img data-src="specialImage2.jpg"/>
            <img data-src="specialImage3.jpg"/>
            <img data-src="specialImage4.jpg"/>
        </figure>
        <div class="normal_images">
            <img src="normalImage0.jpg"/>
            <img src="normalImage1.jpg"/>
        </div>
    </div>
</body>

Everything in the special_image figure will be changed on page load by an external script, so I don't have influence on this (otherwise all of my problems wouldn't exist).

HTML manipulated by external script:

<body>
    <div class="container">
        <figure class="special_images thumbs-bottom" data-effect="zoom" data-profiles="test" data-options="some options">
            <div class="some classes">
                <div>
                    <!-- multiple layers of added content -->
                </div>
                <div class="thumbnails thumbnails-horizontal">
                    <div class="thumbnails thumbnails-horizontal">
                        <div class="thumbnails-wrapper">
                            <ul style="some styles">
                                <li class="thumbnail-selected"><img src="specialImage0?someParameters"></li>
                                <li><img src="specialImage1.jpg?someParameters"></li>
                                <li><img src="specialImage2.jpg?someParameters"></li>
                                <li><img src="specialImage3.jpg?someParameters"></li>
                                <li><img src="specialImage4.jpg?someParameters"></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </figure>
        <div class="normal_images">
            <img src="normalImage0.jpg"/>
            <img src="normalImage1.jpg"/>
        </div>
    </div>
</body>

After the external script added all of those elements, I need to append the normal images into the unordered list created by the script.

jQuery can't seem to find the added elements when I try to target them, even if I delay the function and wait until the external script finished the job.

I did not find any solution to do this and I hope someone here can help me.The jQuery on() sadly doesn't work here, the contents should be moved automatically and are not fired by a click handler.

Thanks in advance for any tips or clues.

解决方案

You can use MutationObserver events to detect when the external script has modified the special_images element.

var targetNodes = $(".special_images");
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var myObserver = new MutationObserver(mutationHandler);
var obsConfig = {
  childList: true,
  characterData: false,
  attributes: false,
  subtree: true
};

//--- Add a target node to the observer. Can only add one node at a time.
targetNodes.each(function() {
  myObserver.observe(this, obsConfig);
});

function mutationHandler(mutationRecords) {
  if ($('.thumbnails-wrapper').length) {
    myObserver.disconnect();
    $('.thumbnails-wrapper ul').append(
      $('.normal_images img').detach()
    );
  }
}

setTimeout(function () {
  $('.special_images').append('<div class="thumbnails-wrapper"><ul></ul></div>')
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="container">
    <div class="special_images" data-effect="zoom" data-profiles="test" data-options="some options">
      <img data-src="specialImage0.jpg" />
      <img data-src="specialImage1.jpg" />
      <img data-src="specialImage2.jpg" />
      <img data-src="specialImage3.jpg" />
      <img data-src="specialImage4.jpg" />
    </div>
    <div class="normal_images">
      <img src="normalImage0.jpg" />
      <img src="normalImage1.jpg" />
    </div>
  </div>
</body>

这篇关于定位没有点击处理程序的动态添加元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！