jQuery: How do I wrap() a dynamically loaded element?

Question

I am skinning a 3rd party app that has no HTML natively. It all comes back from an onLoad event and a bunch of ajax calls.

I added jQuery to the page. I need to wrap() an element that is dynamically loaded. I can include a plugin if needed.

How do I do this? Thanks.

UPDATE: This works, but is there a better way?

$(document).ready(function() {

(function() {
  var length = $(".applicationShell").length;

  var h = setInterval(function () {
    if ($(".applicationShell").length > length) {
      length = $(".applicationShell").length;
      clearInterval(h);


      $(".applicationShell").addClass("test")

    }
  }, 100);
})();


});

Erm... select it `$()`, then wrap it? Dynamically loaded elements aren't different from elements that 'were already there'. — MvanGeest, Aug 03 '10 at 17:32
I would look into how the ajax calls are being made, and see if there's a way to add a global callback so you can avoid the interval. As you know it's pretty expensive to periodically search the entire DOM for a class selector like that. — aceofspades, Sep 11 '10 at 17:41

score 1 · Accepted Answer · answered Aug 03 '10 at 23:22

1

Well, it seems I can't find a better solution. :( Here is the one I used.

$(document).ready(function() {

(function() {
  var length = $(".applicationShell").length;

  var h = setInterval(function () {
    if ($(".applicationShell").length > length) {
      length = $(".applicationShell").length;
      clearInterval(h);


      $(".applicationShell").addClass("test")

    }
  }, 100);
})();


});

answered Aug 03 '10 at 23:22

Glen Lipka

1,019
8
14

I had an issue with wrapping divs in a slideshow, but my code was running asynchronously as the slideshow was being rendered. So, only a few of the slides were being selected. Without editing the code for the slideshow, this saved me from beating my head against the wall! – psparrow Feb 07 '14 at 17:43

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

$('#element-id').wrap( "<div class='wrapExample' />" );

I can give you more specific help if you post some code you need help with.

Helpful link?

edited May 23 '17 at 10:26

Community

1
1

answered Aug 03 '10 at 17:32

µBio

10,668
6
38
56

Does not work. The element is loaded dynamically after the ready block. Sorry. – Glen Lipka Aug 03 '10 at 17:45
@Glen Lipka Do this in the callback for your ajax calls, not the ready block. – µBio Aug 03 '10 at 18:05
1

Unfortunately, the ajax calls aren't mine. I am skinning a third party app and don't have access to that part of it – Glen Lipka Aug 03 '10 at 18:37
@Glen Lipka added a link to a question asking for similar help. Let me know if that helps – µBio Aug 03 '10 at 18:59
Thats the exact link (coincidentally) that I got the setInterval answer. I wish there was a more 'jQuery" like way to do it. I wonder why there isn't a DomChanged event. – Glen Lipka Aug 03 '10 at 19:51

score 0 · Answer 3 · answered Aug 03 '10 at 17:44

IF you want to do that upon another event, you could do:

$('.clickme').live('click', function() {
  $(myselector).wrap(/* my stuff to wrap */);// Live handler called.
});

where the "click" would be the event you wish to manage the behavior for and the .clickme is the class on the event instantiator.

Other option: do that wrap as part of the ajax success (making the assuption of jquery ajax here):

...snip
success: function(msg)
            {
                $(myselector).wrap(/* my stuff to wrap */);
            },
...

...

Sorry, this is no good either, as it depends on a click event. I want to wrap the element as soon as it shows up. — Glen Lipka, Aug 03 '10 at 17:46

Ken Redler · Answer 4 · 2010-08-03T20:24:57.627

Edit: Unfortunately you ~~can~~ cannot use the livequery plugin to get the effect you're looking for. Thanks to @patrick for pointing this out. This fiddle shows it doesn't work with a native DOM element append ("Howdy" remains black). Uncomment the last line of the fiddle, and you'll see that when the jQuery append does finally run, livequery then "sees" the native DOM additions in addition to the jQuery (and both additions become green).

It's therefore likely you'll have to stick with a polling solution like the one in your question. The fact that jQuery sees non-jQuery DOM additions when it has cause to inspect the container perhaps suggests another way to poll -- just use livequery on the container as in the Fiddle, and then use setTimeout to perform a neutral jQuery operation (like removeClass('nothing')) on the container. Livequery would then "see" the new elements added between polls. This does work, although I'm not sure it's a better option.

I had the same answer, but I deleted it because I'm pretty sure `livequery` only works for elements added via jQuery. From the docs: *"If your plugin modifies the DOM without using the built-in DOM Modification methods (append, addClass, etc), you can register your plugin with Live Query like this..."* — user113716, Aug 03 '10 at 18:02
@patrick -- you could be right. I'm trying a closer reading of the docs and taking a peek at the source. — Ken Redler, Aug 03 '10 at 18:04

jQuery: How do I wrap() a dynamically loaded element?

4 Answers4

Linked