动态创建的html中的jquery倒计时

时间:2016-02-05 07:40:55

标签: javascript php jquery html

我需要使用jquery倒计时keith wood - jquery countdown plugin

提供一些帮助

我通过从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)显示了set html:

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

我没有错误,但我没有看到计数器...我确实看到周围插入了TimeCounter:TimeCounter在页面上结束。我想这是客户端/服务器端问题。也许我需要在使用数据设置innerHTML后再次调用该函数。但我不知道如何。

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

2 个答案:

答案 0 :(得分:1)

您可以在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});
});

<强>更新 我不知道该插件,但调用this.countdown()的范围可能会更改。在这种情况下,您可以使用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});
    });
});

答案 1 :(得分:0)

尚未对代码进行测试,但我的建议是避免发送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');