Can't execute javascript on dynamically created html button

Question

So im quite new to javascript/jquery, so i need some help. Here's the problem. I have a page, where a button triggers a jquery animation to reveal a log in form.(It just replaces the previous html that was in it's place) On the login form i have it dynamically create a button to hide the login form, and reveal the original html. But that button cannot be called by the .click method, or even the OnClick attribute does not work! Any Advice?

$(document).ready(function() {
$("#login_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").empty();
$("#menu").append('<button id="back_button"></button>');
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});

And Then the code that listens for the "back_button" click:

$(document).ready(function() {
$("#back_button").click(function() {
$("#menu").animate({height: "toggle"}, 500, function() {
$("#menu").append(//Regular HTML);
$("#menu").animate({height: "toggle"}, {duration: 500, queue: false});
});
});
});

Can javascript not be executed on a element generated my another javascript? Any thoughts would be great! Thanks in advance!

Have you tried to search for it? stackoverflow.com/questions/1359018/… — thebreiflabb
– thebreiflabb, Commented May 10, 2013 at 20:55
Yes it can be executed on an element generated by another script, however, you must first wait for said element to exist before binding the event, or instead take advantage of event delegation by binding the event to a parent of said element, such as the document. learn.jquery.com/events/event-delegation — user400654
– user400654, Commented May 10, 2013 at 20:55

j08691 · Accepted Answer · 2013-05-10 20:54:59Z

12

Change the code for your back buttom from:

$("#back_button").click(function() {

to

$(document).on('click', "#back_button", function() {

When creating elements dynamically, you need to use jQuery's .on() function.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page.

answered May 10, 2013 at 20:54

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brad Over a year ago

Bind to something closer to the element so that jQuery doesn't have to decide to whether or not to call your callback for every event that bubbles up.

j08691 Over a year ago

Yes, whenever possible bind to the closest existing element. "Attaching many delegated event handlers near the top of the document tree can degrade performance. Each time the event occurs, jQuery must compare all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. For best performance, attach delegated events at a document location as close as possible to the target elements. Avoid excessive use of document or document.body for delegated events on large documents."

Adrian · Accepted Answer · 2013-05-10 20:54:47Z

0

You attempt to add the click handler on load, but the <button> hasn't been created yet. Add the click function in the same code that creates the button, after it's created.

answered May 10, 2013 at 20:54

Adrian

47.2k6 gold badges121 silver badges110 bronze badges

3 Comments

Adrian Over a year ago

@AdamD That's exactly what I said, what are you talking about?

Brad Over a year ago

How is this incorrect? It's a perfectly good way to solve the problem, and may be better performance wise depending on the specific situation.

thebreiflabb Over a year ago

Indeed it is correct, I would probably go with another solution, but it's perfectly valid.

Adil Shaikh · Accepted Answer · 2013-05-10 20:55:43Z

0

You need event delegation

$(document).on('click', '#back_button', function() {
  // do your stuff here
});

http://api.jquery.com/on/

answered May 10, 2013 at 20:55

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Kyle Trauberman · Accepted Answer · 2013-05-10 20:55:45Z

0

This is occuring because when the javascript for the back button is executed, the actual element doesn't exist.

Instead, use .on to bind the click event.

$(document).on("click", "#back_button", function() {});

answered May 10, 2013 at 20:55

Kyle Trauberman

25.7k13 gold badges88 silver badges124 bronze badges

Collectives™ on Stack Overflow

Can't execute javascript on dynamically created html button

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related