Losing Click when sorting DOM elements with JQuery Sort Function

92 Views Asked by At

I'm having a really strange problem while sorting a dynamic DOM structure and by dynamic I mean that there will be content coming in and out of the structure I'm sorting. So what I'm doing is running two functions every 500ms in order to re-order all the new DOM elements as soon as they came in.

I'm doing this because I have no way to sort the data before is in the DOM (so please save your "this is not the right way to do things" comments, I Know, I have no other option).

The sorting is working "OK" the thing is that originally all this DOM elements (basically a parent DIV with a lot of children) open a PopUp window when you click on them, as soon as I apply the sorting function nothing happens when I click on them, my guess is because the whole DOM is reordering very fast because of rerunning the sorting function all the time something get lost, I just don't know how to fix it.

Here's the JQuery for assigning priorities to each div row and then reordering elements by that priority:

 $(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)   
})
0

There are 0 best solutions below