运行 Odometer.js 在动态创建的元素上

Question

我正在使用里程表为一些值设置动画https://github.hubspot.com/odometer/

我看到上面写着：

Any libraries you're using to update their value, provided they don't update by erasing and rerendering the odometer element, will work just fine.

但这就是我需要做的。有没有办法让它与动态创建的元素一起使用？我已经尝试在 AJAX 成功时再次调用整个库函数，但没有成功...

我在页面加载上有一些元素可以正常工作（0 的初始值是通过 JS 设置的）

<strong id="odometer-away" class="odometer" data-value="'. $value .'"></strong>

我的 js 使用 jQuery 的 .text() 来设置滚动到视图中的元素值。（从数据属性中提取）

var odo = $('#odometer-away');
odo.text(parseFloat(odo.data('value')));

BUT 当我通过 AJAX 创建更多元素并将它们加载到页面时，动画不再对这些元素起作用，我看到这些元素不包含元素在页面加载时从里程计脚本生成的任何 HTML...所以很明显有些东西没有注册。

我找不到这方面的任何信息，我已经很努力地寻找了。这是一个 fiddle，其中新创建的元素没有动画。

Fiddle demo

Answer 1

Odometer 可能会在 document.ready 上查找带有 odometer class 的元素，但您必须在新元素上手动调用它：

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

Demo

Answer 2

您需要使用 new Odometer() 重新初始化新创建的元素。在您的 fiddle 演示中使用它。

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

运行 Odometer.js 在动态创建的元素上

Run Odometer.js on dynamically created elements

jquery

odometer