首页 > 解决方案 > 使用 JQuery 排序功能对 DOM 元素进行排序时丢失单击

问题描述

在对动态 DOM 结构进行排序时,我遇到了一个非常奇怪的问题,动态是指我正在排序的结构中会有内容进出。所以我正在做的是每 500 毫秒运行两个函数,以便在所有新的 DOM 元素进入后立即对其进行重新排序。

我这样做是因为我无法在 DOM 中对数据进行排序(所以请保存您的“这不是正确的做事方式”评论,我知道,我别无选择)。

排序工作正常,事情是最初所有这些DOM元素(基本上是一个有很多孩子的父DIV)当你点击它们时打开一个弹出窗口,一旦我应用排序功能,当我点击时没有任何反应在他们身上,我的猜测是因为整个 DOM 重新排序非常快,因为总是重新运行排序功能,有些东西会丢失,我只是不知道如何修复它。

这是用于为每个 div 行分配优先级然后按该优先级重新排序元素的 JQuery:

 $(document).ready(function () {        
    setInterval(function () {       
        //Incoming Chat Structure Variables
        var $incomingChatsTable, $incomingChatsRows, $incomingChatTags
        $incomingChatsTable= $("div[__jx__id*='incoming_list__list_content_container']")
        $incomingChatsRowsContainer=$("div[__jx__id='___$_194__visitor_list__incoming_list__list__content']")
        $incomingChatsRows = $("div[class*='renderers_Incoming']")
        $incomingChatTags = $( "div[__jx__id*='incoming_list__list__content'] div[class*='renderers_Incoming'] .visitorlist_tags .jx_ui_html_span:last-child .tag").toArray()        
        //Assigning Priorities Function
        function assignPriority(arrayParent) {
            for ( var i=0; i <= arrayParent.length; i++) {
                var actualRow = $(arrayParent[i])
                var minutesInQueue = $(actualRow).find('.time_cell').text().substr(0,2)
                var priorityVal = parseInt(minutesInQueue)
                var actualRowTags = $( actualRow ).find('.tag').toArray()
                $(actualRow).addClass('priorityRow')                
                for (var k=0; k <= actualRowTags.length; k++) {
                    let normalHolderTag = $(actualRowTags[k]).text().toLowerCase()
                    if (normalHolderTag === 'vip') {
                        priorityVal += 30
                        $(actualRow).attr('data-priority', priorityVal)                    
                    } else if ( normalHolderTag === 'rg' ) {
                        priorityVal += 20
                        $(actualRow).attr('data-priority', priorityVal)
                    } else if ( normalHolderTag === 'accountclosure' ) {
                        priorityVal += 10
                        $(actualRow).attr('data-priority', priorityVal)                    
                    } else {
                        $(actualRow).attr('data-priority', priorityVal)   
                    } 
                    $(actualRow).find('.numbers_cell').text(priorityVal)
                }
            }     
        }   
        //Sorting Incoming Chats By Priority
        function orderByPriority(container) {
            var myArray = container.find('.priorityRow')
            myArray.sort(function(a,b){
                contentA = parseInt( $(a).data('priority') )
                contentB = parseInt( $(b).data('priority') )  
                return (contentB - contentA)                              
            }).prependTo( container )
        }
        setInterval(function () {       
            assignPriority( $incomingChatsRows )
            orderByPriority( $incomingChatsRowsContainer )
        }, 500)
    }, 500)   
})

标签: javascripthtmljquerydomdom-traversal

解决方案


推荐阅读