jQuery mCustomScrollbar没有处理ajax内容

Question

    $(window).load(function(){
                $("#content_1").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });

// ajax code
function beauty_of_ceylon() {
  $('.content-text').html('<p style="position:absolute;"><img src="images/ajax-loader.gif" /></p>');
  $('.content-text').load("packages/beauty-of-ceylon.php");
}

Answer 1

嘿伙计们我这样做:)

在发送ajax之前销毁它并清除你的div.请检查注释

$(document).ready(function(){
    $(".YOUR-CONTENT-DIV").mCustomScrollbar({
        theme:"dark",
    });


    $.ajax({
        url: "YOUR AJAX URL",
        type: "post",
        data: data,
        beforeSend: function() {
            $(".YOUR-CONTENT-DIV").mCustomScrollbar("destroy"); //Destroy
            $('.YOUR-CONTENT-DIV').html('<div class="loading">Loading ...</div>'); //clear html because it will show normal scroll bar
        },
        success: function(data) {
            $('.YOUR-CONTENT-DIV').html(data);
        },
        complete: function () { 
            $(".YOUR-CONTENT-DIV").mCustomScrollbar({
                theme:"dark",
            });               
        }
    }); 
});

Answer 2

我相信.load()是异步的,这意味着它在.load()调用期间继续运行脚本.所以你必须在回调函数中调用mCustomScrollbar,否则内容将不存在.所以试试吧

$('.content-text').load("packages/beauty-of-ceylon.php", function () {
    $("#content_1").mCustomScrollbar({
        scrollButtons:{
            enable:true
        }
    });
});