如何在點擊事件上將事件綁定到動態加載的內容中？

Question

我的html內有一個div，其ID為pageContent 。 當用戶單擊各種按鈕時，它將加載適當的內容。 當用戶單擊它加載的javaQuestions按鈕時，將javaQuestions.html插入div就可以了。 但是，在javaQuestions.html內部，我有一個可折疊的列表，並且在沒有用戶單擊TWICE的情況下，我想不出一種方法來“綁定” li折疊/展開。 現在我擁有的是：

$("#pageContent").on('click', 'li', function (){
    $('.collapsible').collapsible();
});

所以我想會發生什么，首先用戶單擊按鈕，然后加載內容。 然后，用戶單擊任意li，它啟用“ collapsible（）”功能，但不會取消折疊/折疊內容。 只有當用戶第二次單擊時，它才能正常工作。 我嘗試添加$('.collapsible').collapsible(); 加載javaQuestions.html內容的事件，但它不會執行任何操作。 有點障礙，有什么想法嗎？

編輯：這是加載內容的代碼：

$("#pageContent").on('click', '#javaQuestions', function (e) {
    fadeIn("#pageContent", "../java-questions/javaQuestions.html", 50);
    fadeIn("#commentsContent", "../comments/comment-section.html", 500);
});

我也很想知道一旦弄清楚它如何工作。 但是正如您所看到的，上面的函數加載了javaquestions.html，而且我似乎找不到一種方法也可以將'li'綁定為可折疊的。

Answer 1

您是否嘗試過使用jQuery bind方法？ 您可以將處理程序綁定到例如body ，然后您不必關心在其后加載和附加處理程序。

更新：也許這會有所幫助：

$(document).ready(function() {
    $("body").on('click', '#pageContent li', function (){
        $('.collapsible').collapsible();
    });
});

Answer 2

使用此文檔，因為它是動態加載的

$(document).on("click","li #pageContent",function(){ 
$('.collapsible').collapsible();
});