DND icon not changing on-screen, but is changing in DOM

Question

I need to be able to drag a tree node to a div. I'm having problems getting the mouseicon to render correctly. It always displays as a X (jstree-er), even when the class in the DOM is changed to jstree-ok.

I have debugged and am certain that the DOM is being changed. It just isn't being rendered any differently.

Nb. the solution found here doesn't work, hence commented out that approach (the data.helper.find returns nothing).

$(document).on('dnd_move.vakata', function (e, data) {
        var t = $(data.event.target);

        // Valid drop target?
        if (t[0].classList.contains("dropzone")) {
            $("#jstree-dnd i").removeClass('jstree-er').addClass('jstree-ok');
            //data.helper.find('.jstree-icon').removeClass('jstree-er').addClass('jstree-ok');
            console.log($("#jstree-dnd i"));
        }
        else {

            $("#jstree-dnd i").removeClass('jstree-ok').addClass('jstree-er');
            //data.helper.find('.jstree-icon').removeClass('jstree-ok').addClass('jstree-er');
            console.log($("#jstree-dnd i"));
        }

    })

Update: jsfiddle added. However, it works okay in a jsfiddle. Turns out that coincidentally trying an older JQuery here highlighted the issue... JSFiddle

Answer 1

Seems the issue is some incompatibility between JQuery 3.3.1 and JSTree 3.3.7

The above code works fine using JQuery 2.2.4