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


});

Answer 1

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

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

Helpful link?

Answer 2

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 */);
            },
...

...

Answer 3

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.

Answer 4

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


});