Question

我的html里面有一个id为pageContent的div。当用户单击各种按钮时，它将加载适当的内容。当用户单击javaQuestions按钮时，它会加载javaQuestions.html到div中。但是，在javaQuestions.html里面，我有一个可折叠的列表，我无法找到一种方法来绑定＆＃34; li崩溃/解除崩溃而无需用户单击TWICE。现在我所拥有的是：

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

所以我猜想发生的事情是，首先用户点击按钮，然后加载内容。然后，用户点击任何li，它启用＆＃34; collapsible（）＆＃34;功能，但不会解开/折叠内容。只有当用户第二次点击时才能正常工作。我尝试将行$('.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，我似乎无法找到一种方法来绑定＆＃39; li＆＃39;一举成为可折叠的。

Answer 1

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

更新：可能会有所帮助：

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

Answer 2

使用此DOCUMENT，因为它是动态加载的

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

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

2 个答案: