Запустите Odometer.js на динамически создаваемых элементах
Я использую одометр для анимации некоторых значений https://github.hubspot.com/odometer/
Я вижу, что в нем говорится:
Любые библиотеки, которые вы используете для обновления своих значений, при условии, что они не обновляются путем удаления и повторного отображения элемента одометра, будут работать просто отлично.
Но это то, что мне нужно сделать. Есть ли способ заставить это работать с динамически созданными элементами? Я попытался вызвать всю библиотечную функцию снова в моем успехе AJAX, но без игры в кости...
У меня есть элементы при загрузке страницы, которые работают правильно (начальное значение 0 устанавливается через JS)
<strong id="odometer-away" class="odometer" data-value="'. $value .'"></strong>
И мой JS использует JQuery's .text()
установить значение элементов после прокрутки в поле зрения. (извлекается из атрибута данных)
var odo = $('#odometer-away');
odo.text(parseFloat(odo.data('value')));
НО, когда я создаю больше элементов через AJAX и загружаю их на страницу, анимация больше не работает на этих элементах, и я вижу, что элементы не содержат никакого сгенерированного HTML-кода из сценария одометра, который элементы имеют при загрузке страницы... так явно что-то не регистрируется.
Я не могу найти какую-либо информацию по этому вопросу, и я выглядел довольно усердно. Вот скрипка, где вновь созданные элементы не анимируются.
2 ответа
Одометр, вероятно, ищет элементы с odometer
класс на document.ready
, но вам придется вручную вызывать его для новых элементов:
var el = document.getElementById('new-odo');
var new_odo = new Odometer({
el: el
});
new_odo.update(999);
Вам нужно заново оживить вновь созданные элементы, используя новый одометр (). Используйте это в своей демонстрации скрипки.
/* elements already on the page will animate */
setTimeout(function(){
var odo = $('#odometer-away');
odo.text(parseFloat(odo.data('value')));
}, 1000);
/* create new element */
var div = document.createElement("DIV");
div.classList.add("odometer");
div.classList.add("new-odometer");
var t = document.createTextNode(0);
div.appendChild(t);
document.body.appendChild(div);
/* try and animate newly created elements but it just updates the value... */
setTimeout(function(){
var new_odo = document.querySelector('.new-odometer');
var odPhone = new Odometer({
el: new_odo,
});
odPhone.update(200);
}, 3000);