0

See jsfiddle for working example of issue.

http://jsfiddle.net/grdhog/Wng5a/5/

When I add a row to the table. I send it first to the server by ajax then completely rebuild the table from an ajax json call. When I delete a row I sent it first to the server by ajax then completely rebuild the table from an ajax json call.

The delete is going recursive - see console output

Click on a few rows to "delete" them and you'll see the recursion. This simplified example doesn't actually add or delete rows but hopefully you get the idea. Can you explain why I have the issue and how to resolve it please. I suspect my call to get_rows() from the delete click is part of the problem.

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body><p>Turn on the Javascript console to see output:</p>
    <button id="add">add new row</button>
    <table id="rows">
    </table>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

$(document).ready(function() { 

    get_rows();

    $('#add').click(function() {  
        // ajax call to server to add row
        console.log("add row");
        get_rows();
        return false;
    });

    function get_rows(){
        console.log("inside get_rows!");
        $("#rows").empty();
        // ajax call to return all rows
        for (i=0; i < 5;i++){
            var item = '<tr><td id="' + i + '" class="del_row">delete row ' + i + ' by clicking me!</td></tr>';
            $("#rows").append(item);             
        }

        $(document).on("click", ".del_row", function(){
            id = $(this).prop('id');
            console.log("delete row " + id);
            // ajax call to delete on server
            get_rows();                            
        });                                   
    }

}); // end ready



    </script>
  </body>
</html>
Ground Hog
  • 183
  • 1
  • 3
  • 12
  • 1
    Consider building a [jsfiddle.net](http://jsfiddle.net)/[jsbin.com](http://jsbin.com) demo of your issue instead of just dumping your code in the question. You're the one asking for help, so it is your responsibility to make it easier for people to help you. – lanzz Apr 26 '14 at 09:07
  • OK done. See jsfiddle please. See http://www.wkoorts.com/wkblog/2013/01/26/console-log-with-jsfiddle/ for cool tip on how to expose the console log. – Ground Hog Apr 26 '14 at 09:38

2 Answers2

1

The id attribute mustn't be a number, you can read more here What are valid values for the id attribute in HTML?

Surely this don't answer your question but you can prevent others problems in the future.

Community
  • 1
  • 1
zalomea
  • 81
  • 3
1

You have to move the .on call out of the get_rows function. Because otherwise every time you call get_rows it adds a new listener.

function get_rows(){
    console.log("inside get_rows!");
    $("#rows").empty();
    // ajax call to return all rows
    for (i=0; i < 5;i++){
        var item = '<tr><td id="' + i + '" class="del_row">delete row ' + i + ' by clicking me!</td></tr>';
        $("#rows").append(item);             
    }                                  
}

 $(document).on("click", ".del_row", function(){
        id = $(this).prop('id');
        console.log("delete row " + id);
        // ajax call to delete on server
        get_rows();                            
 });

http://jsfiddle.net/Wng5a/6/

jonas
  • 915
  • 6
  • 8
  • OK as a newbie I some how thought I need "rewire" up del_row event listener each time I was removing and replacing the table rows. $(document).on("click.. continues to work regardless. Thank you. – Ground Hog Apr 26 '14 at 10:28