时间戳

首页 > 解决方案 > 在动态创建的元素上运行 Odometer.js

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

问题描述

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

我看到它说：

您用来更新其值的任何库，只要它们不通过擦除和重新渲染里程计元素来更新，都可以正常工作。

但这是我需要做的。有没有办法让它与动态创建的元素一起工作？我尝试在 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')));

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

我找不到有关此的任何信息，而且我看起来很努力。这是一个新创建的元素没有动画的小提琴。

小提琴演示

标签： jqueryodometer

解决方案

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

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

推荐阅读