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

找到了解决方案！

你需要像这样调用load函数中的滚动条，而不是像我那样调用外部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加载内容后滚动条无法正常工作

1 个答案: