How to add mCustomScrollbar to a div that was generated by javascript?

Question

In this ajax request I am getting some data from the DB and then generating the HTML using javascript but sometimes the CatItemDetails *div* is too big and needs a scroll to show all the data.

I am trying to do it like so:

$("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
            }
        });
    });
});

for some reason this is not working for me!!

Answer 1

the issue is that you can't use the mCustomScrollbar in more than one place like this eg:

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

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

Only the first one will work. it has to be something like this:

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