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

Question

我的 html 中有一个 id 为 pageContent 的 div。当用户点击各种按钮时，它会加载相应的内容。当用户单击它加载的 javaQuestions 按钮时，javaQuestions.html 进入 div 就好了。但是，在javaQuestions.html 里面，我有一个可折叠的列表，我想不出一种方法来“绑定”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();
});