Question

如何将内容定位并附加到已动态添加的内容？

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>

special_image 图中的所有内容都会在页面加载时被外部脚本更改，因此我不会对此产生影响（否则我的所有问题都不会存在）

由外部脚本操纵的HTML：

<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>

在外部脚本添加了所有这些元素之后，我需要将普通图片附加到脚本创建的无序列表中。

当我尝试定位它们时，jQuery似乎无法找到添加的元素，即使我延迟该函数并等到外部脚本完成作业。

我没有找到任何解决方案来做到这一点，我希望有人可以帮助我。 jQuery on（）遗憾地在这里不起作用，内容应该自动移动，不会被点击处理程序触发。

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

Answer 1

您是否尝试在 special_image 图上使用jquery的 on（）方法？

on（）方法用于在动态创建的元素上添加事件处理程序，但要使其工作，必须将其分配给非动态创建的父元素。在你的情况下，它看起来像这样：

$(non-dynamic DOM element).on('load', 'img', function() { 
  //your function to append
}

以上代码的目标是图形或类容器 div，然后每当加载图像时 - 在您的情况下，它将是 special_images 容器中的图像 - 括号中的功能会运行。

希望这有帮助

Answer 2

在初始脚本之前或之后添加JavaScript，具体取决于您的具体情况。

$('div.normal_images img').each(function(){
    $('div.thumbnails-wrapper').append($(this).wrap('<li></li>'));
});

如果在移动图像后不想要它们，可以empty()普通图像div。

Answer 3

您可以use MutationObserver events检测外部脚本何时修改了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
};

//--- 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>

Answer 4

试试这个：

(function() {
    var thumbWrapper = document.getElementsByClassName('thumbnails-wrapper');
    var normImg = document.getElementsByClassName('normal_images');

    for (var i = 0; i < normImg.length; i++) {
      thumbWrapper[0].appendChild(normImg[i].getElementsByTagName('img')[i]);
    }
  })()

在没有点击处理程序

4 个答案: