Javascript 在动态listview上生成动画

我正在尝试向每个列表项添加一个单击60秒的动画饼图按钮计时器。每个列表视图都是由javascript生成的

我尝试过不同的方法，但我永远无法使用饼图计时器生成每一行，每一行的时间取决于单击

为了更好地理解我试图完成的任务，这里是创建列表行的计时器动画：

创建列表视图的一些代码：

 var listCreated = false;

 function appendToList() {

     //Create the listview if not created
     if (!listCreated) {
         $("#content").append("<ul id='list' data-role='listview' data-inset='true'></ul>");
         listCreated = true;
         $("#content").trigger("create");
     }
     $("#list").append("<li>Item</li>");
     $("#list").listview("refresh");

 }

---

我是jQuery mobile的新手，因此非常感谢您的帮助：

您正在使用的代码无法工作，因为您对每个计时器使用相同的ID。在文档上，当使用ID时，它们需要是唯一的名称。解决方法是使用两个类timer和timera，然后单击鼠标，将列表项替换为计时器动画并启动它

演示

新代码

---

您可以像这样添加多个馅饼：；但是，您的插件一次只允许运行一个饼图。如果你在另一个正在运行的时候启动第二个，第一个会在那一点停止。干得好，塔索斯！但是，如果计时器已在运行，并且您添加了第二个计时器。单击第二个会重置第一个，而不是让它同时运行……我还没有走那么远但是您可以删除$.timer.replaceWith0；至少你看到计时器停止了。演示-

$(document).on("click", "li", function () {
$(".timer").replaceWith("<div class='timera'>0</div>");
$(this).replaceWith("<li><a><div class='timer'></div>Timer Running</a></li>");
$("#list").listview("refresh");
runTimer() 
});