jQuery Sortable not working on nested link

Question

I'm using Bootstrap Tab and applying the Drag effect of jQuery Sortable . So far it's working fine on the first level including the Bootstrap Tab. But when it goes to the level 3 of nested level, drag effect is not working properly.

Also the Bootstrap Tab view on the 2nd and 3rd level, each of it's link is not loading the corresponding div view (the one with .tab-pane and reference id), but the first level is working fine. I created a click function of each links to remove the parent 'active' class which displays the links view div upon clicked but seems nothing to work.

var nestedList = $("ul.nested_with_switch li ul").children("li");

nestedList.click(function(){
    $(this).data('clicked', true);
})

nestedList.click(function(){
    if($(this).data('clicked') === true){
     nestedList.parents("ul li").removeClass("active");
     nestedList.find("li").removeClass("active");
    }
})

Here's the Code .

Answer 1

Start with removing what seems to be code that does nothing... replace:

nestedList.click(function(){
    $(this).data('clicked', true);
})

nestedList.click(function(){
    if($(this).data('clicked') === true){
     nestedList.parents("ul li").removeClass("active");
     nestedList.find("li").removeClass("active");
    }
})

with:

nestedList.click(function(){
    nestedList.parents("li").removeClass("active");
    nestedList.find("li").removeClass("active");
})

Next, you probably want to use .children("li") instead of .find("li") , but I'm not 100% sure what you're trying to accomplish with your code.