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

Posted 2023-05-09

【中文标题】无法在动态添加的元素上显示 mCustomScrollBar

【英文标题】：Unable to show mCustomScrollBar on dynamically added elements

【发布时间】：2019-03-03 01:28:36

【问题描述】：

我有一个 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

【问题讨论】：

请注意，当您附加 <ul> 元素时，您将附加一个 id 到它。然后，您继续在同一 <ul> 元素上创建另一个附加逻辑，该元素将 id 作为您的选择器。注意 id 是一个 unique 选择器。因此，您的 $("#MetricsTypeYearModelListUl").append() 只会应用于它找到的具有相关 id 的第一个元素。

【参考方案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();

【讨论】：

完成了第二种方法，感谢@Gabriele Petrioli