JQuery on click not working

Question

I am having trouble processing the event handler. I am invoking JSON on the page as shown below. Then I want to be able to click one of the buttons that I created, which will trigger a warning "hello there". It works with any other element on the page, but not with <button> .

Can anyone help?

test.js

 $(document).ready(function() { $.getJSON('/api/v1/recipe/?format=json', function(data) { $.each(data.objects, function(i, recipe) { $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); }); }); $('rmv').on('click', function() { alert('hello there!'); }); }); 

recipe.html

 {% extends 'base.html' %} {% block content %} <div class="container-fluid"> <div class="row-fluid"> <div class="span6"> <form action='' method="post">{% csrf_token %} {{ form.as_p }} <input type="submit" value="go baby!"> </form> </div> <div class="span6"> <table class="table table-striped table-bordered" id="recipes"> <tr> <th>Title</th> <th>Ingredients</th> <th>Method</th> <th>Remove</th> </tr> </table> </div> </div> </div> {% block recipes %}{% endblock recipes %} {% endblock content %} 

Answer 1

you have a selector wrong it should be

 $('#rmv') 

and if you add an item dynamically, you should use it as

 $(document).on('click','#rmv',function(e) { //handler code here }); 

your loop in the ajax callback will probably create elements with duplicate identifiers, which is wrong, as @Alnitak mentions that you can switch to the class selector, for example, after changing cde

 $.getJSON('/api/v1/recipe/?format=json', function(data) { $.each(data.objects, function(i, recipe) { $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn rmv" type="button" >remove</button></td></tr>'); }); }); 

and the selector will look like

 $(document).on('click','.rmv',function(e) { //handler code here }); 

Answer 2

Try it. Move this code inside a callback

 $(document).ready(function() { $.getJSON('/api/v1/recipe/?format=json', function(data) { $.each(data.objects, function(i, recipe) { $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); }); $('#rmv').on('click', function() { alert('hello there!'); }); }); }); 

OR use jQuery.on

 $(document).on("click", "#rmv",function() { alert('hello there!'); }); 

Answer 3

First, make sure that there is at most one element with the identifier rmv . The identifier should be unique, but you seem to be adding a few recipes, each with its own delete button.

You also have problems registering the event handler — you do not wait for the AJAX call to complete (and then add a table row) before registering the event handler.

This can be solved by registering the event handler in the AJAX success callback, but with the first problem with your identifier, the best solution would be to use the class ( .rmv ) instead of the identifier, and then use

 $('#recipes').on('click', '.rmv', function() { var $tr = $(this).closest('tr'); // do something with the current row }); 

The above code can be logged outside of the success callback because it uses event delegation. It relies on the click event, bubbling up to the closing table (which already exists), instead of directly registering the event on each button as they are created.

Answer 4

The jquery function requires the addition of the '#' character if you use the element identifier to trigger any call. So change

 $('rmv').on('click', function() { alert('hello there!'); }); 

to

 $('#rmv').on('click', function() { alert('hello there!'); }); 

Answer 5

 $.getJSON('/api/v1/recipe/?format=json', function(data) { $.each(data.objects, function(i, recipe) { $('table#recipes').append('<tr><td>' + recipe.title + '</td><td>' + recipe.ingredients + '</td><td>' + recipe.method + '</td><td><button class="btn" type="button" id="rmv">remove</button></td></tr>'); }); $('rmv').on('click', function() { alert('hello there!'); }); }); 

Attach an event handler to the success function of your ajax request.

Change Like others, your rmv selector rmv wrong, should be #rmv

Answer 6

 $('#rmv', table).on('click', function(){ alert('hello there!'); });