jquery appended html is not detecting javascript?

Question

sorry if my question deosnt make sense, but thats the best way i can put it, i have this jquery script that when user clicks the login link, it appends the html form to do so, which works fine, but the appended(login-form) uses jquery to log into the site, but it deosnt seem to detect the javascript,

oppose to when i put the login form without appending, just normally on the page, it works fine, it detects the javascript, but not when appended.

i hope you understand what i just said thank :))

the code is a bit long, but i shortened it for illustartion purposes.

http://jsfiddle.net/YHCwM/1/

Answer 1

That's because normally jQuery binds events to elements already in the DOM when the scripts first run. Elements added later need to be bound differently, often using .live().

Instead of:

$('#elementAddedLater').click(function(){/*....*/});

try:

$('#elementAddedLater').live('click',function(){/*....*/});

The linked-function name, above, gives a run-through of the other events that can be bound via .live()

As @Pointy notes, below, it's also worth looking at .delegate(), which seems to offer much the same functionality as .live(), but more concisely and clearly.

Answer 2

The reason this is happening is your sequence of events:

1. DocumentLoad fires
2. Attach a submit() handler to an element that doesn't exist yet - so no handlers are added
3. User clicks a button which adds the element to the page

You can either fix this by using live events or changing the order. (Live wireup for the submit event is new as of jQuery 1.4.1 IIRC).

$('#regForm2').live('submit', function(e){});