Jquery append input element and send data from that input element

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?

Didier Ghys · Accepted Answer · 2012-02-22 10:44:39Z

6

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

edited Feb 22, 2012 at 10:44

answered Feb 22, 2012 at 10:13

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sinsedrix Over a year ago

A pity that create_new_gallery has to be created and selected in the same part of the code. Have a look to my answer.

sinsedrix · Accepted Answer · 2012-02-22 10:19:03Z

2

#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.

edited Feb 22, 2012 at 10:19

answered Feb 22, 2012 at 10:12

sinsedrix

4,8055 gold badges38 silver badges66 bronze badges

Comments

Simon Wang · Accepted Answer · 2012-02-22 10:19:22Z

1

$(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/

answered Feb 22, 2012 at 10:19

Simon Wang

3,0131 gold badge19 silver badges37 bronze badges

Comments

Stelian Matei · Accepted Answer · 2012-02-22 10:14:47Z

-1

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/

answered Feb 22, 2012 at 10:14

Stelian Matei

11.6k3 gold badges28 silver badges29 bronze badges

1 Comment

Rory McCrossan Over a year ago

live() is deprecated. Use delegate() or on() instead.

Collectives™ on Stack Overflow

Jquery append input element and send data from that input element

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related