Ajax重复两次

Question

I am working on some jQuery to check if a cell in a table has been edited. If it has, the revision gets sent back to the database via ajax. I am using a timeout delay to give the user 2500 milliseconds between keystrokes to make their full correction and catch when they are finished. I am also using blur bypass the timeout delay if they click out to a different td in the html table. Once ajax is complete I add a "saved" class to the td and have ajax inside an if statement so that ajax only happens if the "saved" class is not present. This only allows ajax to happen once.

My issue: Even with the added precautions above, when the td is not blurred and left to timeout instead ajax happens twice. I can verify this because the message box comes up twice and values in my table are doubled (as they are supposed to because the table data is purposely added to any old data in that spot)

My Question: Why might this be happening and how can I fix this?

Side Note: The toastr code has also stopped working and I am not sure why.

$('td').on('input blur', function(e) {

    var timeoutDelay=2500;

    if( e.type == "blur"){
        timeoutDelay=1;
    }

    // If NOT already saved...
    if( !$(this).hasClass("saved") ){
        var _this = $(this); // preserve reference to the input field here

        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(function() {
            console.log(_this)
            $.ajax({
                method: "POST",
                url: "updatedatabase.php",
                data: { 
                    content: _this.text(), 
                    date: _this.siblings().first().text(),
                    prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                    old: old
                }
            })
            .done(function( msg ) {
                alert( msg );
                // Add the "saved" class to prevent other saving
                _this.addClass("saved");
            });

            toastr.options = {
                "positionClass": "toast-top-center",
                "onclick": null,
                "timeOut": "2500",
            }

            toastr.info(old,'Database Updated!<br><br>Your Previous Amount Was:');

            _this.prop('contenteditable', false);

        }, timeoutDelay);
    }
});

$(document).ready(function () {

    var old;
            
    $('td').click(function(){
                
        old=$(this).text();
                
        $(this).prop('contenteditable', true);
                
                
    });
            
    var saveTimeout;
            
    // Remove the "saved" class on keydown
    $('td').on('keydown', function(e) {
        $(this).removeClass("saved");
    });
    
    $('td').on('input blur', function(e) {
                                
        var timeoutDelay=2500;
               
        if( e.type == "blur"){
            timeoutDelay=1;
        }
                
        // If NOT already saved...
        if( !$(this).hasClass("saved") ){
            var _this = $(this); // preserve reference to the input field here
            
            // Add the "saved" class to prevent other saving
            _this.addClass("saved");
            
            clearTimeout(saveTimeout);
            saveTimeout = setTimeout(function() {
                console.log(_this)
                $.ajax({
                    method: "POST",
                    url: "updatedatabase.php",
                    data: { 
                        content: _this.text(), 
                        date: _this.siblings().first().text(),
                        prod: $('tr:first-child th:nth-child(' + (_this.index() + 1) + ')').text(),
                        old: old
                    }
                })
                .done(function( msg ) {
                    alert( msg );
                });

                toastr.options = {
                    "positionClass": "toast-top-center",
                    "onclick": null,
                    "timeOut": "2500",
                }

                toastr.info(old,'Database Updated!<br><br>Your Previous Amount Was:');
                        
                _this.prop('contenteditable', false);
                        
            }, timeoutDelay);
        }
    });
            
            
    $("td").hover(function(){
                                
                
                    
        $(this).addClass('highlight').siblings().first().addClass('highlight');

        $('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');
                
                
    },function(){
                
                
                    
        $(this).removeClass("highlight").siblings().first().removeClass('highlight');

        $('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');
                
                
    });
    
}); 

table,th, td {
  
    border: 1px solid black;
    border-collapse: collapse;
        
}

.highlight {
    
    background-color:#E0E0E0;
    color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" rel="stylesheet"/> 
        <script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<table>
  <tr>
    <th>Item #</th>
    <th>1234567</th>
    <th>7654321</th>
    <th>5678945</th>
  </tr>
  <tr>
    <th>Product</th>
    <th><u>22 ounce Dark</u></th>
    <th><u>12count 4oz Dark</u></th>
    <th><u>24count 6oz TJ</u></th>
  </tr>
  <tr>
    <th>2016-01-03</th>
    <td>13587</td>
    <td>2203</td>
    <td>4111</td>
  </tr>
  <tr>
    <th>2016-01-04</th>
    <td>14111</td>
    <td>3247</td>
    <td>4332</td>
  </tr>
  <tr>
    <th>2016-01-05</th>
    <td>13212</td>
    <td>3101</td>
    <td>3911</td>
  </tr>
  <tr>
    <th>2016-01-06</th>
    <td>16335</td>
    <td>3299</td>
    <td>4001</td>
  </tr>
  <tr>
    <th>2016-01-07</th>
    <td>15421</td>
    <td>3100</td>
    <td>4078</td>
  </tr>
</table>

</div>