Jquery嵌套的li和ul標簽不點擊

Question

我有一個像這樣的列表，它基本上就像一棵樹。 我使用這個 jquery 庫https://www.jqueryscript.net/demo/jQuery-Plugin-For-Expandable-Html-List-Element-Expandable-List/我將它與一個類結合在一起來定義選擇。 這是它的樣子。

我使用的腳本基本上只是選擇在頁面加載時具有“名稱可選”的類。 但是，當創建動態列表元素時它不起作用。 我已經嘗試過使用 body 選擇器，雖然非“文件夾”類可以工作，但在創建動態元素后，嵌套的 ul 元素似乎不再工作了。

這是我的問題的 JSFiddle。 由於拖動庫不是托管的，我在 src 中包含了一個腳本標簽。

https://jsfiddle.net/9jak62of/

 $(".li-selectable").click(function () { if ($(this).hasClass('active')) { $(".li-selectable").removeClass('active') } else { $(".li-selectable").removeClass('active') $(this).addClass('active') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list-group list" id="layers_list_group"> <li class="list-group-item folder"><span>Paths</span> <ul class="list-group list"> <li class="list-group-item li-selectable">BeginningPathBottom</li> <li class="list-group-item li-selectable">BeginningPathMid</li> <li class="list-group-item li-selectable">BeginningPathTop</li> <li class="list-group-item li-selectable">ConveyorBeltPath</li> <li class="list-group-item li-selectable">Path1</li> </ul> </li> <li class="list-group-item li-selectable">Assets_1</li> <li class="list-group-item li-selectable">Collision</li> <li class="list-group-item li-selectable">MainObjs</li> <li class="list-group-item li-selectable">Placeholder_Indicators</li> <li class="list-group-item li-selectable">CAMERABLOCK</li> <li class="list-group-item folder"><span>Layer1</span> <ul class="list-group list"> <li class="list-group-item li-selectable">LavaTiles</li> <li class="list-group-item li-selectable">Layer1_TOP</li> <li class="list-group-item li-selectable">Layer1_MAIN</li> </ul> </li> <li class="list-group-item li-selectable">Layer2</li> <li class="list-group-item li-selectable">Layer3</li> <li class="list-group-item li-selectable">Layer4</li> <li class="list-group-item li-selectable">Layer5</li> <li class="list-group-item li-selectable">Layer6</li> <li class="list-group-item li-selectable">Placeholder_Tilesets</li> <li class="list-group-item li-selectable">Background</li> </ul>

Answer 1

您需要使用以下代碼為動態創建的元素綁定點擊事件處理程序

$(document).on('click',".li-selectable", function () {
  
    /*if ($(this).hasClass('active')) {
        $(".li-selectable").removeClass('active')
    }
    else {
        
            $(".li-selectable").removeClass('active')
            $(this).addClass('active')
    }*/
    //improvement in above script
     $(this).toggleClass('active');
     $(".li-selectable").not(this).removeClass('active')
});