CODEWITHSUNDEEP
javascriptjquery
Sasha
Sasha

Reputation: 8705

Jquery append input element and send data from that input element

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?

Upvotes: 2

Views: 33029

Answers (4)

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 6

Simon Wang
Simon Wang

Reputation: 2943

$(document).ready(function () {
    $("#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: http://jsfiddle.net/39E4s/2/ ​

Upvotes: 1

sinsedrix
sinsedrix

Reputation: 4775

#create_new_gallery doesn't exist when you bind its click event.

Here is what your code should look like:

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

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

Notice that getting $("#new_gallery") into a variable avoid to look for it twice.

Upvotes: 2

Stelian Matei
Stelian Matei

Reputation: 11623

Try live to handle the events fired for elements added after the page has loaded.

$("#create_new_gallery").live('click', function(){
   alert('1'); 
});

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

Upvotes: -1

Related Questions