如何在点击事件上将事件绑定到动态加载的内容中？

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();
});