jQuery writing input button append

Question

I'm writing an input button with the following code:

$("#QnA").append("<input type='button' name='questionSub' value='Save'/>");

What I would like to do it capture the click function of that new button. This is what I attempted:

$('input[name=questionSub]').click(function () {
   alert('hi');
});

This isn't working for me. Any ideas?

Answer 1

It works for me. (jsFiddle Example)

Just make sure you call the click function after you've appended the input button.

---

Edit:
You only need to use live() if you want to bind the click function before you append the input, since live() will attach a handler to the event for all elements which match the current selector, now or in the future.

jsFiddle Example

Answer 2

You need to use jQuery's live method for newly created elements

$('input[name=questionSub]').live("click", function () {
   alert('hi');
});

Answer 3

You can only bind an event to an element after the element has been created so make sure that the click binding occurs after the input has been appended.

Answer 4

You can attach the click handler when you create it, like this:

$("<input type='button' name='questionSub' value='Save'/>").click(function() {
  alert('hi');
}).appendTo("#QnA");