Jquery: When adding submit button, it cannot be selected again.

Question

Hello there,

I would like to add a button to the current page using html()-function.

This button needs to be selectable, and alert('click') when it is clicked. This seems impossible.

Look at this code

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        $('div').html('<form method="post" action=""><input type="submit" /></form>');
        event.preventDefault();
    }); 
    $(':submit').click(function(event){
        event.preventDefault();
        alert('click');
    });
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>

What I want is to be able to click <a href="#">Click here to add button</a>. Jquery uses $('div').html('<form method="post" action=""><input type="submit" /></form>'); to replace the div with a submit button.

What I want to happen is for the submit button click to trigger alert('click'). This doesnt happen though.

Any ideas why?

Thanks,
Marius

Answer 1

Use event delegation, either with live or delegate. E.g.:

$(':submit').live("click", function(event){

live will:

Attach a handler to the event for all elements which match the current selector, now or in the future.

Thus event handlers attached to elements which have been injected into the DOM programmatically will work irrespective of when said handlers were attached.

Answer 2

You need to use jquery live to add the click event.

Live:

$(':submit').live("click", function(event){
    event.preventDefault();
    alert('click');
});

Answer 3

I strongly recommend you to use jQuery DOM when adding/removing dom objects

http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype

the solution using jquery DOM

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(event){
        var submitDOM = $.FORM(({ method: "post", action: ""}, 
                            submit = $.INPUT({ type: "submit" })
                        );

        $(submit).click(function() {
            alert("click"); 
            return false;
        });

        $('div').append(submitDOM);
    }); 
});
</script>


<a href="#">Click here to add button</a>
<div>Here</div>

Answer 4

When you use bind() it immediately attaches the handler to the set of elements returned by the selector.

So, on document ready, $(":submit") will return zero elements because there are no elements in the DOM that are of a type of submit (see http://api.jquery.com/submit-selector/). Your handler, at that point, doesn't get attached to anything. Later, when you click the link and add the form and child submit button, it still has the default event handler attached to it.

To get the behavior that you want, you have two options.

One is to attach the handler to the submit button in your $('a').click() handler, rather than evaluating the selector during document.ready.

The other, as karim79 suggests, use .live() (see http://api.jquery.com/live/) or .delegate() (see http://api.jquery.com/delegate/) to lazily bind to an element that may not exist yet.