CODEWITHSUNDEEP
jquery
Taapo
Taapo

Reputation: 1977

Removing dynamically created table row using ajax

I have been breaking my head over this, as to why it is not working like it should.

I'm creating a new table row using the .after method, like this:

             $('#milestone_add_final').submit(function(event){
                    if (($('#milestone_date').eq(0).val().length == 0) || ($('#milestone_description').eq(0).val().length) == 0) { alert("You forgot to enter a value!"); return false; } 
                    $.blockUI();
                    event.preventDefault();
                    var values = $(this).serialize();
                        $.ajax({
                          url: "submit.php",
                          type: "post",
                          data: values,
                          success: function(response){
                               var json = $.parseJSON(response);
                               $('.milestones tr:first').after("<tr id=\""+json.milestone_id+"\"><td class=\"date smallest\">"+json.milestone_date+"</td><td class=\"description edit_input\" id=\""+json.milestone_id+"\">"+json.milestone_description+"</td><td class=\"action smallest\"><a class=\"delete\" href=\"#\">x</a></td></tr>");
                               $('#milestone_date').val('').blur();
                               $('#milestone_description').val('').blur();
                          },
                          error:function(){
                              alert(failure);
                          }   
                    }); 
             });

in addition to the hardcoded ones that are already configured in the html code:

            <table id="milestones">
            <tr><th class="date"><form id="milestone_add_final" method="post"><input type="text" name="milestone_date" id="milestone_date" placeholder="Date"></th><th class="description"><input type="text" name="milestone_description" id="milestone_description" placeholder="Description"></th><th class="action"><button type="submit">+</button><input type="hidden" name="action" value="milestone_add_final"></form></th></tr>
            <tr id="2"><td class="date smallest">22/02/13</td><td class="description edit_input" id="todo_description_153">qfhds sqkjf lhfsjlsqf hjlksqj</td><td class="action  smallest"><a href="#" class="delete">x</a></td></tr>
            <tr id="4"><td class="date smallest">22/02/13</td><td class="description edit_input" id="todo_description_153">xxxxx</td><td class="action  smallest"><a href="#" class="delete">x</a></td></tr>
            </table>

When I try to remove a table row of the already existing ones, it works fine - but when I try to do the same with a dynamically added one (through jQuery), it doesn't work. I'm at odds as to why it wouldn't work. 

            $('table#milestones td a.delete').on('click', function()
                    {
                        if (confirm("Are you sure you want to delete this milestone?"))
                        {
                            var id = $(this).parent().parent().attr('id');
                            var data = 'milestone=' + id  + '&action=milestone_delete_final';
                            var parent = $(this).parent().parent();

                            $.ajax(
                            {
                                   type: "POST",
                                   url: "delete.php",
                                   data: data,
                                   cache: false,

                                   success: function()
                                   {
                                        parent.remove();
                                                               }
                             });                
                        }
                    });

Upvotes: 0

Views: 1010

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

You need event delegation -

 $('#milestones').on('click','a.delete', function(){

http://api.jquery.com/on/

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

Dynamically added elements must have their events delegated to them through a static parent element.

Changing one line of code will fix this.

$('table#milestones td a.delete').on('click', function()

To

$('table#milestones').on('click', 'td a.delete', function()

Upvotes: 1

Related Questions