动态创建的 HTML 中的 jQuery 倒计时

jquery countdown in dynamically created html

本文关键字：jQuery 倒计时 中的 HTML 创建 动态      更新时间：2023-09-26
我需要一些帮助来使用 jquery 倒计时

基思·伍德 - jquery 倒计时插件

我正在通过从 mysql 数据库（php ajax 调用）中检索数据并将其放入div 来创建几个倒计时：

在 PHP 中（getdetails.php -> 从 MySQL-database 获取$mid和$time）：

    $mrow="TimeCounter inserted here:"
    $mrow.="<div id='"RowDiv'"><div id='"timecount".$mid."'"><script> $('#timecount".$mid."').countdown({until: ".$time."}); </script></div></div>";
    $mrow.="TimeCounter ends here";

在JS中，我用我得到的数据设置了innerHTML：

    var url="getDetails.php";
    var what="getTimeData"; 
       console.log("call getTimeData");
    var p1 = $.post(url,{what:what,selId:selValue,conName:"GId"});
        p1.done(function(data){
        console.log("Data -> : "+ data);
        document.getElementById("CounterDiv").innerHTML=data
      });

console.log（data）向我展示了设置的html：

    <div id="RowDiv" ><div id="timecount2"><script> $('#timecount2').countdown({until: 1454713200}); </script></div></div>

我没有收到任何错误，但我没有看到计数器...我确实看到周围的时间计数器插入到这里：时间计数器在页面上结束。我想这是客户端/服务器端问题。也许我需要在使用数据设置 innerHTML 后再次调用该函数。但我不知道怎么做。

我该如何解决这个问题？有什么想法吗？

您可以在 jQuery.post() 的回调/成功函数中启动计数器，而不是在 HTML 元素中添加内联脚本。为此，您必须更改PHP和JS，如下所示：

.PHP 

$mrow="TimeCounter inserted here:"
$mrow.="<div id='"RowDiv'"><div id='"timecount" . $mid . "'" data-time='"" . $time . "'"></div></div>";
$mrow.="TimeCounter ends here";

.JS

var url = "getDetails.php",
    what = "getTimeData";
$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
    $('#CounterDiv').html(data).find('[id^="timecount"]').countdown({until: $(this).data('time')*1});
});

更新：我不知道插件，但是调用.countdown()时this的范围可能会改变。在这种情况下，您可以使用 jQuery .each()函数来传递元素。以下是您执行此操作的方法：

$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
    var $counters = $('#CounterDiv').html(data).find('[id^="timecount"]'),
        $el,t;
    $counters.each(function(index,element){
       $el = $(element);
       t = $el.data('time')*1;
       $el.countdown({until: t});
    });
});

还没有测试过代码，但我建议的重点是避免发送 HTML 作为响应，并使getdetails.php响应$mid和$time，如下所示：

$data = array(
    'mid' => $mid,
    'time' => $time
);
$response = json_encode($data);

您的 JS 代码应如下所示：

var url = "getDetails.php";
var what = "getTimeData";
console.log("call getTimeData");
$.post(url, {what: what, selId: selValue, conName: "GId"}, function (data) {
    console.log("Data -> : " + data);
    var id = 'timecount' + data.mid;
    var row = '<div id="RowDiv"><div id="' + id + '"></div</div>';
    $("#CounterDiv").html(row);
    $('#' + id).countdown({until: data.time});
}, 'json');
相关文章：