我的代码工作得很好，但我不喜欢我正在使用的输入事件，因为每次按下键都会发生这种情况。这个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);
});
段：
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');
});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>
答案 0 :(得分：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
}
})