javascript - 如何将 mCustomScrollbar 添加到由 javascript 生成的 div 中？

Question

在此 ajax 请求中，我从数据库获取一些数据，然后使用 javascript 生成 HTML，但有时会生成 CatItemDetails *div* 太大，需要滚动才能显示所有数据。

我正在尝试这样做:

$("body").on("click", ".store", function() {
    event.preventDefault();
    $("#cat02 .CatLoader").fadeIn("fast");
    $('#cat02 .CatData').html('');

    var store_id = $(this).attr('store_id');
    var category_name = $(this).attr('cat_name');
    $("#cat02 .CatDataTitle").html(category_name);
    url = 'stores/store/';
    var posting = $.post(url, {store_id: store_id});
    posting.done(function(data) {
        var JSONObject = $.parseJSON(data);
        var store = '';
        store += '<div class="CatItemsName">' + JSONObject.name + '</div>';
        store += '<div class="CatItemsDetails" id="store-details">';
        store += JSONObject.description;
        store += '</div>';
        store += '<div class="CatItemsOptn">';
        store += ' <div class="CatItemsOptnImg"><img src="' + JSONObject.images + '" alt="" /></div>';
        store += '  <ul>';
        store += '     <li><span class="IconsFont IconsFont-phone"></span><div class="CatItemTxt">' + JSONObject.phone + '</div><div style="clear:both"></div></li>';
        store += '     <li><span class="IconsFont IconsFont-link"></span><div class="CatItemTxt"><a href="' + JSONObject.website + '" target="_blank">' + JSONObject.website + '</a></div><div style="clear:both"></div></li>';
        store += '     <li><span class="IconsFont IconsFont-map-marker"></span><div class="CatItemTxt">' + JSONObject.address + '<div style="clear:both"></div></div></li>';
        store += ' </ul>';
        store += '</div>';
        $('#cat02 .CatData').html(store);
    });
    posting.always(function() {
        $("#cat02 .CatLoader").fadeOut();
        $("#store-details").mCustomScrollbar({
            scrollButtons: {
                enable: true,
            },
            advanced: {
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });
    });
});

由于某种原因，这对我不起作用!!

Answer 1

问题是您不能在多个地方使用 mCustomScrollbar，例如:

$("#store-details").mCustomScrollbar({
            scrollButtons: {
                enable: true,
            },
            advanced: {
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });

$("#data").mCustomScrollbar({
            scrollButtons: {
                enable: true,
            },
            advanced: {
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });

只有第一个才有效。它必须是这样的:

$("#store-details, #data").mCustomScrollbar({
            scrollButtons: {
                enable: true,
            },
            advanced: {
                updateOnContentResize: true,
                updateOnBrowserResize: true
            }
        });