我的代码如下：
$('*[data-pickup]').change(function(){
var value = $(this).val();
console.log(value);
$.ajax({
type : "POST",
cache : false,
url : "a.php?pickup",
data : {'X': value},
success: function(data) {
$("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO");
}
});
$("*[data-pick='" + $(this).attr("data-pickup") + "']").html("HELLO 2");
$("*[data-pick='" + $(this).attr("data-pickup") + "']").show();
})
AJAX调用在通过Firebug查看时显示一个响应，但屏幕上没有刷新，所以我把它改为一个简单的"Hello"响应，但仍然不起作用。
如果我注释掉.html("HELLO 2")行，它会显示曾经隐藏的div，其中包含data-pick=1或data-pick=2等的HTML5数据元素(取决于attr("data-pickup")是什么)，它会自动填充"Test"，因此它会显示"Test"。
如果我取消对.html("HELLO 2")行的注释，则显示的div会显示"HELLO 2"。但是，对于注释掉的.html("HELLO 2")行，应该通过AJAX调用将其从"Test"更新为"Hello"，但事实并非如此。如果我将data*更改为一个简单的HTMLid元素，并将所有代码更新为#" + $(this).attr("data-pickup") + "，那么它与data属性的工作原理完全相同(AJAX调用不会更新任何内容)。
当我创建一个名为"el"的var，使其等于*[data-pick='" + $(this).attr("data-pickup") + "']，然后将其打印到控制台时，它显示为：">[data-pick='1']"或">[deta-pick='2']"等。然后，如果我将所有代码从$("*[data-pick='" + $(this).attr("data-pickup") + "']").whatever更新到$(el).whatever(认为某个地方可能存在错误)，它仍然可以像以前一样工作。
那么，我做错了什么？为什么div不会通过AJAX调用刷新，但在AJAX调用之后会刷新？
问题是ajax函数的成功处理程序中的"this"是ajax函数本身，而不是触发事件处理程序的元素。您需要做的是存储元素var el = $(this)的值，然后每当您想利用闭包访问元素时引用它。
$('*[data-pickup]').change(function(){
var value = $(this).val();
var el = $(this);
console.log(value);
$.ajax({
type : "POST",
cache : false,
url : "a.php?pickup",
data : {'X': value},
success: function(data) {
$("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO");
}
});
$("*[data-pick='" + el.attr("data-pickup") + "']").html("HELLO 2");
$("*[data-pick='" + el.attr("data-pickup") + "']").show();
})
试试这个：
$('*[data-pickup]').change(function() {
var self = this;
var value = $(self).val();
console.log(value);
$.ajax({
type : "POST",
cache : false,
url : "a.php?pickup",
data : {'X': value},
success: function(data) {
$("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO");
}
});
$("*[data-pick='" + $(self).attr("data-pickup") + "']").html("HELLO 2");
$("*[data-pick='" + $(self).attr("data-pickup") + "']").show();
})
this与更改处理程序中的其他this不同。
这里有一个解决方案：
$('*[data-pickup]').change(function(){
var value = $(this).val();
var $el = $("*[data-pick='" + $(this).attr("data-pickup") + "']");//here keep a reference to the element(s) of interest.
console.log(value);
$.ajax({
type: "POST",
cache: false,
url: "a.php?pickup",
data: {'X': value},
success: function(data) {
$el.html("HELLO");//$el is still available here, from the closure formed by the outer function
}
});
$el.show().html("HELLO 2");
});