jquery 在一个循环函数中,通过apache更新页面后查找所有类

7xzttuei  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(86)

在我的页面中,我在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>被无休止地添加到页面中。

f0ofjuux

f0ofjuux1#

问题是初始选择器不能捕获后来添加的新元素。要解决这个问题,请使用.on()方法检测新插入的调用记录元素并将其添加到currentRecords。这是修改后的js

(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);
        }
    });

    //Bind a function to the `.pending-calls` element that will execute whenever a new `.call-record` element is added to the page.
    $('.pending-calls').on('DOMNodeInserted', '.call-record', function () {
        //Add the new element to the `currentRecords` array.
        currentRecords.push($(this).prop('id'));
    });
})();

希望这对你有用。

**PS:**请注意,当DOM频繁添加大量元素时,使用DOMNodeInserted可能会导致性能问题。如果不需要对DOM更改进行实时响应,则事件处理可能过多

krcsximq

krcsximq2#

我找到了解决问题的方法。我把数组currentRecords放在函数的外部,所以当页面加载时,它会用当前记录填充一次。在ajax调用之后,如果我发现了一条新记录,我就添加到列表中。

//Get current records
var currentRecords = [];
$('.call-record').each(function () {
    currentRecords.push($(this).prop('id'););
});

(function worker() {
    $.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 'newRow' to the page.
            if(newRowIsFound){
                //add the id in the array
                currentRecords.push(newRow.id);
           
                //Add it to the page e.g <div class="call-record" id="id4">Record 4</div>
                $('.pending-calls').prepend(newRow);
            }
        },
        complete: function () {             
            setTimeout(worker, 5000);
        }
    });
})();

相关问题