Jquery 滚动事件未检测到元素的更新值

Question

简介:我试图创建一个聊天应用程序，我想加载只有N个消息在第一(说20)，并作为用户向上滚动，达到顶部，然后更多的20个消息通过AJAX获取，并预先添加到现有的消息。当然，这些消息都是旧消息。我到处搜索的逻辑，以创建一个无限滚动反向抓取行从表和前置，但我得到了无限滚动获取和追加下一行，我不想在这种情况下。因此，我决定尝试创造一种逻辑或图形，我可以自己做这种反向无限滚动。因此，我试着做下面的事情:

What I tried:当获取前20条消息并说它们的id在81-100范围内时，我捕获较低的id 81并将其放置在聊天框的父容器的data-id属性中。现在，当调用scroll事件时，我将此id(81)发送到后端，并使用WHERE (id < 81 AND id >= 81-20) ORDER BY id ASC运行查询，并根据需要返回较早的20行。在AJAX调用的success函数中，我将新的较低id更新为聊天框的父元素。之前是81，现在是61。

问题:对于第一个滚动，我可以正确地检测到81，但是一旦值改变，scroll元素就不会检测到更新后的值61。仍然返回81。

预期:当用户滚动到顶部时，我如何使滚动事件检测更新的data-id值?

var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").data('id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to='+to+'&lastid='+lastid,
dataType: 'JSON',
success: function(data){
chatBox.attr('data-id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});

HTML

<div class="retrive-chat" data-id="81"></div>

这个data-id值最初是从另一个AJAX调用中分配的，然后在触发滚动事件时更新，但是在再次触发滚动事件时不会检测到更新的值。它继续使用81.

Answer 1

这也是我曾经遇到过的问题，解决方法很简单:保持一致。

如果您使用.data()修改属性，但随后想要使用.attr()读取值，则会发生这种情况。任意使用，但不要混合使用:

var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").attr('data-id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to='+to+'&lastid='+lastid,
dataType: 'JSON',
success: function(data){
chatBox.attr('data-id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});

或:

var chatBox = $(".retrive-chat");
$('.chat-box').scroll(function (event) {
var st = $(this).scrollTop();
var lastid = $(this).find(".retrive-chat").data('id');
console.log(lastid); // RETURNS OLD VALUE EVERYTIME
// PREPEND OLD MESSAGES IN CHAT ON SCROLL TOP
if(st <= 10){
$.ajax({
url: 'processes/chat.php',
type: 'POST',
data: 'type=loadmore&to='+to+'&lastid='+lastid,
dataType: 'JSON',
success: function(data){
chatBox.data('id', data.mid); // UPDATE VALUE WHEN THE NEWS ROWS ARE FETCHED
chatBox.prepend(data.html);
}
});
}
});

如果你在检查器中检查html，你会注意到这一点:用.data()更改它，更改将不可见。如果使用.attr()，则值将明显改变。

Answer 2

不要使用.attr()来更新id值，使用.data():

chatBox.data("id", data.mid);

根据jQuery的.data()机制的文档，所涉及的属性值只读取一次。之后，这些值由jQuery代码保存在一个内部数据结构中，DOM属性值不会被改变。

注意，当你获取"id"值最初，你只使用"id"要设置它，而不是"data-id"