Запустите Odometer.js на динамически создаваемых элементах

Question

Я использую одометр для анимации некоторых значений 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-кода из сценария одометра, который элементы имеют при загрузке страницы... так явно что-то не регистрируется.

Я не могу найти какую-либо информацию по этому вопросу, и я выглядел довольно усердно. Вот скрипка, где вновь созданные элементы не анимируются.

Скрипка демо

Answer 1

Одометр, вероятно, ищет элементы с odometer класс на document.ready, но вам придется вручную вызывать его для новых элементов:

  var el = document.getElementById('new-odo');
  var new_odo = new Odometer({
    el: el
  });
  new_odo.update(999);

демонстрация

Answer 2

Вам нужно заново оживить вновь созданные элементы, используя новый одометр (). Используйте это в своей демонстрации скрипки.

/* 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);