Невозможно показать mCustomScrollBar на динамически добавленных элементах - PullRequest
0 голосов
/ 27 сентября 2018

У меня есть 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>');
    }

, который я использовал "mCustomScrollbar "класс в моем элементе ul, но это не отображается, нормальная полоса прокрутки действительно появляется.Как я могу показать CustomScrollBar

1 Ответ

0 голосов
/ 27 сентября 2018

Можно установить для свойства конфигурации 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();
...