CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsdom-events
RGBK
RGBK

Reputation: 2048

Chicken or the egg event listener situ: jQuery watching for javascript created node?

First of all, I have to use and create this DOM element in a Javascript file, I'm stuck with it. I can't do this all in jQuery, which would obviously be a lot easier.

In basic terms:

The JS file creates a dom element at some point of time after the page has loaded. I want to append a canvas graphic to that dom element. That canvas element is triggered by a jQuery plugin, which I call in my sites jQuery script, like so:

Spinners.create('#spinThis');
Spinners.create('#spinThis').play();});

I have tried to put this bit of code directly in the Javascript file via inline "script" tags using "innerHTML" , but it's not being seen (why actually?)

It's a real conundrum. How do I tell my jQuery file to keep on the look out for an element which will come sooner or later,via another (Java) script, and then do something with it?

I would think something like live() would do the trick, but that doesn't make sense, it needs an event and it needs to be associated with the id which isn't even existent yet. Sigh

You can see it here: http://syndex.me

(In literal terms, the Javascript file is a infinite scroll for tumblr (the only one that works) and I'm injecting a spin preloader when it calls for new content in a div that is appended to the end of the content wrapper, you can see it as a pink bar at the end of the posts as it's loading.)

Upvotes: 1

Views: 203

Answers (2)

Deleteman
Deleteman

Reputation: 8700

I'm not sure I understand 100% your problem but it sounds like you can use "live" to solve it.

Remember that you can reference an id or class that doesn't yet exist and call the live method, in order to set an event (even a custom event) that will handle whatever you need.

Upvotes: 0

Kevin B
Kevin B

Reputation: 95047

It is sortof hacky, but this is basically what livequery used to do:

var spinThisTimer = setInterval(function(){

  if (document.getElementById('spinThis') {
    clearInterval(spinThisTimer);
    Spinners.create('#spinThis');
    Spinners.create('#spinThis').play();});
  });

},100);

It searches the DOM 10 times a second for an element with the ID of spinThis. Once it is found, the interval is cleared and the code is ran.

Upvotes: 1

Related Questions