Ajax - 通过

Question

我的代码工作得很好，但我不喜欢我正在使用的输入事件，因为每次按下键都会发生这种情况。这个Ajax是为了更新数据库，所以我在寻找一种延迟几秒钟的方法，然后提交给我的另一个很棒的成员。我现在遇到的问题是POST变量由于某种原因不再通过Ajax，我无法弄清楚原因。

我的问题是：为什么会发生这种情况，我该如何调整它来修复它。

下面首先是使用输入事件但效果很好的代码，第二个是我现在想要使用的代码，但是Ajax没有传递变量。

旧代码：

            $('td').on('input',function() {
            $.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,'Your Previous Amount Was:');

        });

新代码无效：

            var saveTimeout = false;

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

            if(saveTimeout) 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,'Your Previous Amount Was:');

            }, 2500);
        });

段：

＆＃13;

＆＃13;

            var old;
            
            $('td').click(function(){
                
                old=$(this).text();
                
                editclick="yes;"
                
                $(this).prop('contenteditable', true);
                
               // var days = 7;
               // var result = $(this).siblings().first().text();
               // result.setDate(result.getDate() + days);
               // alert( result );
                
            });
            
            var saveTimeout = false;
            
            $('td').on('input', function() {
            
                if(saveTimeout) 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,'Your Previous Amount Was:');
                
                }, 2500);
            });
            
            
            $("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');
                
                
            });

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

所以，$(this)没有引用输入字段，而是窗口对象是这里的问题。发生这种情况是因为您将函数包装在setTimeout中的事件处理程序中，这会更改函数的执行上下文。

但是这应该是可以修复的，如果你只是首先将输入字段的引用存储到局部变量中，然后在timeout-ed（一个单词？）函数中使用它，如下所示：

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

    var _this = $(this); // preserve reference to the input field here

    if(saveTimeout) clearTimeout(saveTimeout);

    // replace $(this) with _this everywhere inside this function
    saveTimeout = setTimeout(function() {
            $.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
            }
        })