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

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