0

Possible Duplicate:
How to detect new element creation in jQuery?

I am trying to replace the text value of a button, but the button does not exist at the time the page loads, it comes in after several other user-selections have been made.

I'm trying to replace the button text as soon as the button appears on the page - not based on it being clicked or hovered over or anything like that.

If the button was present onload, I would be able to use javascript to replace the value without any problem - but I'm having trouble figuring out if this would be possible with jQuery and which function to use?

Community
  • 1
  • 1
Jgammel
  • 65
  • 1
  • 1
  • 6
  • 4
    can you post the code to where the button is being added? – jsweazy Sep 24 '12 at 15:51
  • @jSweazy The student selects a section – Jgammel Sep 24 '12 at 16:11
  • got to give more than that... post some html, js, what load_products() do, etc – RASG Sep 24 '12 at 16:21
  • Ok what you need to do is, right after you your button you need to add the jQuery on that item. Or you could keep a hidden submit button on the form until the user selects everything. – jsweazy Sep 24 '12 at 18:00
  • `` Sorry, I'm having difficulties getting this formatted correctly. Thank you for your help. This is sort of what I'm looking for, except ideally my value would change as soon as #fSection loads - not when it's moused over.. Would this be possible? I was attempting to make it work with .appear, but I didn't have any luck. – Jgammel Sep 24 '12 at 20:32

1 Answers1

0

I can think of a few possible solutions that could work cross-browser:

  1. Identify the user event that causes the button to be added to the page, hook that event and AFTER that event runs, find the button and update it's text.

  2. Poll your page with an interval timer to find out when the button is added to the page.

  3. If the button is added after a jQuery ajax operation and you can't modify the actual code that does that ajax work or adds the button, you could hook jQuery operations globally and check the page in a short setTimeout() after the completion of any jQuery ajax operation.

You cannot use jQuery .on() to find out when an object is added to the page. .on() works for event handlers for objects that are added to the page in the future by catching propagated events at a parent object (that is not dynamically added to the page), but doesn't actually tell you when the object is added to the page.

FYI, there is a DOMSubtreeModified and DOMNodeInserted event in some browsers that sounds like it's ready-made for this sort of thing, but it's only available in some browsers and is deprecated (not recommended for use).

The future direction for this type of notification is Mutation Events, but this is not yet very widely supported.

jfriend00
  • 683,504
  • 96
  • 985
  • 979