javascript - 如何在单击事件的动态加载内容中绑定(bind)事件？

Question

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

Answer 1

您是否尝试过使用 jQuery bind方法？例如，您可以将处理程序绑定(bind)到 body，然后您就不必关心在它之后加载和附加处理程序。

更新:这可能会有所帮助:

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