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