button not working in jQuery

Question

I'm new to jQuery and I've written this code in which I develop a form with some input buttons inside. There's a "cancel" button, which when clicked, I want the form to be removed.

Here's my code:

$(document).ready(function(){
$(".newIdea_Button").click(function(){

    if (!new_idea_clicked)
    {
    $(document.body).append("<form>...some buttons here, one with the id cancel_idea_input</form>")
    }

});

$("#cancel_idea_input").click(function(){
    $('#new_idea_form').remove();

});


});

The thing is everything seems right to me but when I open the code in my browser (google chrome or firefox) nothing happens when I click the "cancel" button. but when I copy and paste the second function in the console part of google chrome, then the "cancel" button works! Can somebody please help me figure out what is wrong with my code?

and [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Felix Kling, Jul 22 '13 at 16:49
Relevant documentation: http://learn.jquery.com/events/event-basics/, http://learn.jquery.com/events/event-delegation/. There you will see the following statement *"It is important to note that `.on()` can only create event listeners on elements that exist **at the time you set up the listeners**."* — Felix Kling, Jul 22 '13 at 16:49
Its because the cancel button isnt on the page when you create the event. Try: $(document).on("click","#cancel_idea_input", function(){ $('#new_idea_form').remove(); }); — kevhann80, Jul 22 '13 at 16:50

score 2 · Answer 1 · answered Jul 22 '13 at 16:48

I guess the #cancel_idea_input button is part of your form.

So, in order for the binding to work on dynamically added elements, you should do this :

$(document.body).on('click', "#cancel_idea_input", function(){
    $('#new_idea_form').remove();
});

Instead of document.body you may use any element in which the form is.

score 0 · Answer 2 · answered Jul 22 '13 at 16:52

0

just put

$("#cancel_idea_input").click(function(){
    $('#new_idea_form').remove();
});

inside if after you append form

and don't forget id

DEMO

answered Jul 22 '13 at 16:52

vladkras

16,483
4
45
55

Venkata Krishna · Accepted Answer · 2013-07-22T18:10:50.547

0

There is click shorthand for on('click') in jQuery.

EDIT: Using on('click') for dynamically generated elements. Assuming you have wrapper div with class outerselector

$('.outerselector').on('click', "#cancel_idea_input", function(){
    $('#new_idea_form').remove();
});

Using on('click') for non - dynamically generated elements.

$("#cancel_idea_input").on('click', function(){
    $('#new_idea_form').remove();
});

Thanks Felix Kling, I learnt something new. Thanks for the documentation reference.

edited Jul 22 '13 at 18:10

answered Jul 22 '13 at 17:00

Venkata Krishna

14,926
5
42
56

1

Your answer is very vague. `.click` is simply a shorthand for `.on('click', ...)`. From the [documentation](http://learn.jquery.com/events/event-basics/): *"jQuery offers convenience methods for most native browser events. These methods — including `.click()`, `.focus()`, `.blur()`, `.change()`, etc. — are shorthand for jQuery's `.on()` method."* It is true that you *have to* use `.on` for event delegation, but `.on` can be used for more than just event delegation. Additionally, you don't show *how* to use `.on` for event delegation. – Felix Kling Jul 22 '13 at 17:22

button not working in jQuery

3 Answers3