Unable to show mCustomScrollBar on dynamically added elements

Question

I have a div <div id="MetricsTypeYearModelList"></div> . In this div i am dynamically adding a ul element

$("#MetricsTypeYearModelList").append('<ul class="modal__list mCustomScrollbar" id="MetricsTypeYearModelListUl"></ul>');

After this i am looping over a JSON object and adding li element dynamically to the ul element

for (var i = 0; i < metricsTypeYearModel.length; i++)
    {
        var obj = metricsTypeYearModel[i];
        $("#MetricsTypeYearModelListUl").append('<li data-name='+obj.ModelTypeName+' data-value='+obj.ModelTypeID+' data-id='+obj.ModelTypeID+' class="pModel"><a href="#"> '+obj.ModelTypeName+'</a></li>');
    }

I have used "mCustomScrollbar" class in my ul element but this does not show up, normal scroll bar does show up. How can i show the CustomScrollBar

Answer 1

You can set the live configuration property to true in order to target elements that are dynamically added to the DOM.

So

$(".mCustomScrollbar").mCustomScrollbar({
    live:true // add this after your existing config options
});

---

Alternatively, and in this case might be a better option, just manually call mCustomScrollbar on the newly added element, after adding the contents to it.

for (var i = 0; i < metricsTypeYearModel.length; i++)
    {
        var obj = metricsTypeYearModel[i];
        $("#MetricsTypeYearModelListUl").append('<li data-name='+obj.ModelTypeName+' data-value='+obj.ModelTypeID+' data-id='+obj.ModelTypeID+' class="pModel"><a href="#"> '+obj.ModelTypeName+'</a></li>');
    }

$('#MetricsTypeYearModelListUl').mCustomScrollbar();