Targeting dynamically added elements without click-handler

Question

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.

score 1 · Answer 1 · answered May 05 '17 at 13:56

Did you try using jQUery's on() method on the special_image figure?

The on() method is used to add event handlers on dynamically created elements, but for it to work it must be assigned to a parent element that is not dynamically created. In your case, it would look something like this:

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

The above code targets either the figure or the class-container div and then whenever an image is loaded - in your case it would be an image in the special_images container - your function in the brackets would run.

Hope this helps

This doesn't work for `load` events since they don't bubble. — Mathias Bynens, Jun 14 '21 at 06:11

TurtleTread · Answer 2 · 2017-05-05T14:11:01.597

0

Add JavaScript below either before or after the initial script, depending on your situation.

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

You can empty() the normal images div if you don't want them there after you move the images.

edited May 05 '17 at 14:11

answered May 05 '17 at 13:40

TurtleTread

1,297
2
12
23

Why the downvote though lol. I edited my answer. I think this works well for what you are trying to do. – TurtleTread May 05 '17 at 14:11

score 0 · Accepted Answer · edited May 23 '17 at 11:54

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>

Ok that looks really promising! I'll try that next week when I get to work on that project again. I'll thank you right now for your input and if it works I'll thank you again ;) — IIFLIPII, May 05 '17 at 14:22

score 0 · Answer 4 · answered May 05 '17 at 14:01

try this:

(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]);
    }
  })()

Targeting dynamically added elements without click-handler

4 Answers4