2

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!

Kevin B
  • 94,570
  • 16
  • 163
  • 180
user2371433
  • 33
  • 1
  • 3
  • 3
    Have you tried to search for it? http://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements#answer-9331127 – thebreiflabb May 10 '13 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. http://learn.jquery.com/events/event-delegation/ – Kevin B May 10 '13 at 20:55

4 Answers4

11

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 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. – Brad May 10 '13 at 20:57
  • 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." – j08691 May 10 '13 at 21:00
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.

Adrian
  • 42,911
  • 6
  • 107
  • 99
  • @AdamD That's exactly what I said, what are you talking about? – Adrian May 10 '13 at 20:55
  • 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. – Brad May 10 '13 at 20:55
  • Indeed it is correct, I would probably go with another solution, but it's perfectly valid. – thebreiflabb May 10 '13 at 20:56
0

You need event delegation 

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

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

Adil Shaikh
  • 44,509
  • 17
  • 89
  • 111
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() {});
Kyle Trauberman
  • 25,414
  • 13
  • 85
  • 121