Question

I have this simple HTML code:

<div id="new_gallery">
    <p id="add_gallery">Add new gallery</p>
</div>

and jQuery code:

<script>
    $("#add_gallery").click(function() {
        $("#new_gallery").append('<input name"new_gallery" /><a href="#" id="create_new_gallery">Add</a>');
        $(this).remove();
    });

    $("#create_new_gallery").on('click', function(){
        alert('1'); 
    });
</script>

First function is working, but second one is not. I need to create new input element, send data via ajax, and then delete the input element and append a p element once again. How can I do this?

Answer 1

When the second statement runs, the element #create_new_gallery does not exist yet so it does nothing.

You can do the binding to the click event after you created the element for instance, this ensures the element exists in the DOM:

$("#add_gallery").click(function() {
    $("#new_gallery").append('<input name="new_gallery" /><a href="#" id="create_new_gallery">Add</a>');
    $(this).remove();
    $("#create_new_gallery").on('click', function() {
        alert('1');
    });
});​

DEMO

---

Here is a little bit more optimized version. It’s a bit non-sense to append an element and have to re-query for it (event though querying by id is the fastest method. Besides, it’s best to use the chaining capabilities of jQuery afterall:

$("#add_gallery").click(function() {
    var $gallery = $("#new_gallery");

    $('<input name="new_gallery" />').appendTo($gallery);
    $('<a href="#" id="create_new_gallery">Add</a>')
        .on('click', function() {
            alert('1');
        })
        .appendTo($gallery);

    $(this).remove();
});​

DEMO