AJAX 加载内容后滚动条不工作

Question

我正在尝试使用 Ajax 加载 div。 div 确实加载了，但 div 包含的滚动条之后不起作用。

我有一个 Main.html，我将其他 html 的内容加载到

<div id="content1" > </div>

我这样加载内容：

$("#content1").load("home.html");

     $("#home, #product, #submit2").click(function(){
         if(this.id == "home"){
             $("#content1").load("home.html");
         }

         if(this.id == "product"){
             $("#content1").load("product.html");
         }

home.html 的内容如下所示：

<script type="text/javascript">
        (function($){
            $(window).load(function(){

                $.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default
                $.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default

                $("#content-m").mCustomScrollbar({theme:"minimal"});

            });
        })(jQuery);
    </script> 


<div id="content-m" class="content">
                //bla bla...
    </div>

滚动条在未加载 AJAX 时可以正常工作。所以我确定这不是问题所在。

任何人都可以帮助我使我的滚动条与 Ajax 一起工作吗？

Answer 1

找到解决方案！

您需要像这样在加载函数中调用滚动条，而不是像我那样在外部 home.html 中调用。

$("#content1").load("home.html", function(){
             $("#content-m").mCustomScrollbar({theme:"minimal"});
         });

     $("#home, #product, #submit2").click(function(){
         if(this.id == "home"){
             $("#content1").load("home.html", function(){
                 $("#content-m").mCustomScrollbar({theme:"minimal"});

             });
         }

现在将加载内容，加载后滚动条将起作用。

AJAX 加载内容后滚动条不工作

Scrollbar not working after AJAX Loaded Content

html

javascript

ajax

jquery

jquery-load