Question

我有一个div <div id="MetricsTypeYearModelList"></div>。在这个div中，我正在动态添加ul元素

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

此后，我遍历JSON对象并将li元素动态添加到ul元素

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>');
    }

我在ul元素中使用了“ mCustomScrollbar”类，但是没有显示，正常的滚动条也显示了。如何显示CustomScrollBar

Answer 1

您可以将live配置属性设置为true，以便定位动态添加到DOM的元素。

所以

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

或者，在这种情况下可能是一个更好的选择，只需在向其添加内容之后手动对新添加的元素调用mCustomScrollbar。

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();

无法在动态添加的元素上显示mCustomScrollBar

1 个答案: