2

I'm using js to add form elements into the html document. For instance, I'm adding an entire <form> to a table cell. Eg:

<form class="add-comment"><input type="submit" /></form>

I try to use js to invoke events based on elements within that newly created form but nothing happens. I should get an alert box. What am I doing wrongly?

$('.add-comment').submit(function() {
  alert('form submitted!');
});

Thanks. Hope I explained it well enough.

1
  • 1
    This question has been asked numerous times on SO before, please try to look for similar questions before asking your own. Commented Jan 24, 2010 at 16:24

5 Answers 5

6

Are you adding the element after you register the submit event handler? You will need to register the event after each new element, unless you use the live method to add the event.

$('.add-comment').live('submit', function() {
    alert('form submitted!');
});

This adds the event for all selected elements, even if they are added in the future.

http://api.jquery.com/live/

5
  • 2
    Make sure to use the latest jQuery 1.4 for this technique, as any other version does not support the SUBMIT event.
    – Dave Kiss
    Commented Jan 24, 2010 at 16:25
  • Thanks Kyle! I tried adding both the element before and after the code that is the submit event handler but neither works. Using the .live() event worked though! :) What did you mean to register the event after each new element? Thanks!
    – Lyon
    Commented Jan 24, 2010 at 16:29
  • @Dave: Hmm..I'm using jQuery 1.3.2 and it seems to work. Am I missing something? Thanks :)
    – Lyon
    Commented Jan 24, 2010 at 16:29
  • @Lyon, the element has to be on the page before you can wire it up to an event handler. .live() binds both current and future elements. Commented Jan 24, 2010 at 16:31
  • Take the following for example: You add an element, then add the event. The event works fine for the element. You add another element, but the event doesn't work. You need to add the event to this element to get it to work as well. This is what I meant by adding the event after every new element. live() takes care of this for you. Commented Jan 24, 2010 at 16:33
1

Newly-created elements do not have any event handlers attached to them. You'd have to select them and add the event handler after you've added them (eg. $('.add-comment', newparent).submit(submitfunction)).

You can generally use .live(eventname, function) to add event handlers for existing and future created elements. However you can't use .live('submit', ...) in jQuery 1.3 due to how these events are implemented in browsers (technically, they don't ‘bubble’).

jQuery 1.4 does support live against submit (through a really ugly hack).

2
  • Hi bobince, I'm using .live('submit', function () {}); and that's working in Chrome. From what you mentioned, this won't work in some browsers? How do I add the event handler after I've added them? I'm sorry but I couldn't understand your code. Thanks :) (I'm using jQuery 1.3.2)
    – Lyon
    Commented Jan 24, 2010 at 16:45
  • Yes, it's IE's onsubmit that doesn't bubble (see msdn.microsoft.com/en-us/library/ms536972%28VS.85%29.aspx); many other events don't work with live on IE or other browsers so you can't use it for everything. To select an element inside another element, you pass the parent element as a context node into the $(selector, context) function.
    – bobince
    Commented Jan 24, 2010 at 18:14
1

I've written a rather long blog post regarding this if you're not using jQuery 1.4. You have to wire up the newly added elements, since they were not there when the page loaded. It should give you an insight into what is happening with the .live() method.

1
  • Thank you Jarrett. I followed your blog post and noticed you wire up the newly added elements by calling a function. I moved my original submit method into the function and called it everything I added a new form element and it worked! :) I guess this would work fully in jQuery 1.3.2. Thanks again!
    – Lyon
    Commented Jan 24, 2010 at 16:53
1

Of course adding the event to the element is common worst practice. Try to find out about publish/subscribe style event handling, which can take the place of using the live plugin.

1
  • Thanks Bill. With your recommendations, I found LiveQuery. I'm using it to fire events for submit, blur and a function that doesn't work with event delegation (i think), while I'm using .live() for click and keyup. I also found an article that suggests .live() may be better for performance if the event works using .live(). The article is: groups.google.com/group/jquery-en/browse_thread/thread/… Thanks again! I've learnt a lot through this episode and it's no thanks to all of you geniuses :)
    – Lyon
    Commented Jan 25, 2010 at 3:39
0

Kyle is right, you should use the live event to add events to current and future DOM elements. However, as an alternative, you can add the event when you create the form element:

(jQuery 1.4 style)

$('<form>', {
    id: 'myFormID',
    name: 'myFormName'
}).submit(function(){ alert('form submitted'); })
.appendTo(myDiv);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.