onLoad of new element, delegate/on?

Question

Im trying to run a function on an element (.this_button) that is being loaded dynamically. Im using the following code:

$(function(){
    $("body").on("load", ".this_button", function() {
         console.log("its been loaded");
    });
});

I tried delegate, but it says its been deprecated in favor of on. Some elements might be pushed, say after the document's been loaded for 10 minutes already. How can it continually check if an element .this_button has entered the body?

Anyone know why this isnt working?

Where is it dynamically added? Can't you just add this function there? — Rocky Pulley, Aug 09 '12 at 14:16
@rocky No, this element cannot contain a script. Its being loaded from a database and it would complicate things — Jonah Katz, Aug 09 '12 at 14:17
Is `}):` really what you have at the end? I assume that should be `});` — katy lavallee, Aug 09 '12 at 14:18
@j08691 Isnt that what .on is for? I tried `delegate`, but it says its been deprecated in favor of `on`. Some elements might be pushed, say after the document's been loaded for 10 minutes already. How can it continually check if an element `.this_button` has entered the body? — Jonah Katz, Aug 09 '12 at 14:18
why are you using the load event if the element is loaded dynamically? have you tried removing the event? you would be needing to use delegate of course — KoU_warch, Aug 09 '12 at 14:22
I think you can't do that with the `load` event because it doesn't bubble. — katy lavallee, Aug 09 '12 at 14:24
@EH_warch Now we're getting somewhere. When removing `load`, its giving me a typeerror, has no method 'replace' — Jonah Katz, Aug 09 '12 at 14:25

score 11 · Accepted Answer · answered Aug 09 '12 at 14:31

11

From the documentation:

"In all browsers, the load, scroll, and error events (e.g., on an element) do not bubble. [...] Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event."

answered Aug 09 '12 at 14:31

katy lavallee

2,741
1
28
26

3

What triggers the button to be added to the page? Can you attach it to the same thing? – katy lavallee Aug 09 '12 at 14:33

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

The on method will handle events for the currently selected elements when it is first executed or any future elements that raise a particular event that match a specific selector. Since an element being added to a page does not automatically raise a load or some other type of event, your code will never be executed for your newly added elements.

You have two options. The first is to trigger a custom event whenever your new element is being inserted. For instance,

$.get("/newElemnet", function(newElement) {
   $('#placeToInsertElement').append(newElement);
   $(newElement).trigger('newElementAdded');
});

Then your original function would listen for that custom event:

$(function(){
    $("body").on("newElementAdded", ".this_button", function() {
         console.log("its been loaded");
    });
});

The second option is to constantly poll for the new elements as described in this question.

onLoad of new element, delegate/on?

2 Answers2

Linked

Related