在我的页面中,我在jQuery
中添加了每5秒运行一次的函数。此功能:
1.收集数组currentRecords
中的当前记录
1.执行AJAX
调用并获取数组newRecords
中的新记录
1.如果newRecords
列表包含新记录,则将其添加到页面。
上述逻辑是正确的:
超文本标记语言:
<div class="pending-calls">
<div class="call-record" id="id1">Record 1</div>
<div class="call-record" id="id2">Record 2</div>
<div class="call-record" id="id3">Record 3</div>
</div>
jQuery:
(function worker() {
//Get current records
var currentRecords = [];
$('.call-record').each(function () {
currentRecords.push($(this).prop('id'););
});
$.ajax({
url: '#',
dataType: "json",
type: "POST",
success: function (data) {
//Save records to an array and find the new record. If you find a new one, prepend it 'newRow' to the page.
$('.pending-calls').prepend(newRow);
//e.g <div class="call-record" id="id4">Record 4</div>
},
complete: function () {
setTimeout(worker, 5000);
}
});
})();
然而,当一个新记录被发现并添加到页面时,在下一个循环中,$('.call-record')..
不会捕获它,因此这个新记录<div class="call-record" id="id4">Record 4</div>
被无休止地添加到页面中。
2条答案
按热度按时间f0ofjuux1#
问题是初始选择器不能捕获后来添加的新元素。要解决这个问题,请使用
.on()
方法检测新插入的调用记录元素并将其添加到currentRecords
。这是修改后的js
。希望这对你有用。
**PS:**请注意,当
DOM
频繁添加大量元素时,使用DOMNodeInserted
可能会导致性能问题。如果不需要对DOM
更改进行实时响应,则事件处理可能过多krcsximq2#
我找到了解决问题的方法。我把数组
currentRecords
放在函数的外部,所以当页面加载时,它会用当前记录填充一次。在ajax
调用之后,如果我发现了一条新记录,我就添加到列表中。