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

我需要一点帮助使用jquery倒计时 keith wood - jquery countdown plugin </ p>

我通过从中检索数据来创建多个倒计时 mysql数据库(php ajax调用)并将其放入div:</ p>

在php中(getdetails.php - &gt;从mysql-database获取$ mid和$ time):</ p>

  $ mrow =“插入此处的TimeCounter:”
$ mrow。=“&lt; div id = \”RowDiv \“&gt;&lt; div id = \”timecount“。$ mid 。“\”&gt;&lt; script&gt; $('#timecount“。$ mid。”')。countdown({until:“。$ time。”});&lt; / script&gt;&lt; / div&gt;&lt; / div&gt;“;
$ mrow。=”TimeCounter在此结束“;
</ code> </ pre>

在JS中我使用我得到的数据设置innerHTML:</ p>

  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 - &gt;:”+ data);
document.getElementById(“CounterDiv”)。innerHTML = data
});
</ code> </ pre>
\ n

console.log(数据)向我展示了设置html:</ p>

 &lt; div id =“RowDiv”&gt;&lt; div id =“timecount2”&gt;  &LT;脚本&GT;  $('#timecount2')。倒计时({until:1454713200});  &lt; / script&gt;&lt; / div&gt;&lt; / div&gt; 
</ code> </ pre>

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

我该如何解决这个问题? 有什么想法吗?</ p>
</ div>

展开原文

原文

i need a little help using the jquery countdown keith wood - jquery countdown plugin

I am creating several countdowns by retrieving data from mysql database (php ajax call) and putting it into a div:

in php (getdetails.php -> gets $mid and $time from mysql-database):

    $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";

in JS i set the innerHTML with the data i got:

    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) shows me the set html:

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

I get no errors but i dont see the counter... I do see the surrounding TimeCounter inserted here: TimeCounter ends here on the page. I suppose it is a client / server side issue. Maybe i need to call the function again after setting the innerHTML with the data. But i dont know how.

How can i solve this? Any ideas?

dongliang2058
dongliang2058 我会编辑一下这个问题
4 年多之前 回复
dongxiong2000
dongxiong2000 给我们你的ajax代码,你是否在你的页面中添加了jquery和倒计时来进行ajax调用?
4 年多之前 回复
duanji9481
duanji9481 等什么?您正在创建一个ajax调用来获取执行javascript的页面
4 年多之前 回复

2个回答



您可以在 jQuery的回调/成功函数中启动计数器,而不是在HTML元素中添加内联脚本。 交()</代码>。 为此,您必须更改PHP和JS,如下所示:</ p>

PHP </ strong> </ p>

  $ mrow =“TimeCounter插入此处:”
$ mrow。=“&lt; div id = \”RowDiv \“&gt;&lt; div id = \”timecount“。$ mid。”\“data-time = \ “”。$ time。“\”&gt;&lt; / div&gt;&lt; / div&gt;“;
$ mrow。=”TimeCounter在此结束“;
</ code> </ pre>

< p> JS </ strong> </ p>

  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});
});
</ code> </ pre>


UPDATE:</ strong>
我不知道插件,但调用 .countdown()</ code>时, this </ code>的范围可能会改变。 在这种情况下,您可以使用jQuery的 .each()</ code>函数来传递元素。 这是你如何做到的:</ p>

  $ .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});
});
}) ;
</ code> </ pre>
</ div>

展开原文

原文

Instead of adding an inline script within your HTML element, you can initiate the counter within your callback/success function of jQuery.post(). In order to do this, you will have to change your PHP and JS like below:

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});
});

UPDATE: I don't know the plugin, but the scope of this might get changed when .countdown() is called. In such a case, you can use .each() function of jQuery to pass the element. Here is how you do that:

$.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});
    });
});

duan1226
duan1226 非常欢迎你。
4 年多之前 回复



没有测试过代码,但我的建议是避免发送HTML作为响应并使 getdetails.php </ code>回复 $ mid </ code>和 $ time </ code>,如:</ p>

  $ data = array(
'mid '=&gt; $ mid,
'time'=&gt; $ time
);
$ response = json_encode($ data);
</ code> </ pre>

您的 JS代码应该类似于:</ p>

  var url =“getDetails.php”; 
var what =“getTimeData”;
console.log(“call getTimeData”); \ n $ .post(url,{what:what,selId:selValue,conName:“GId”},function(data){
console.log(“Data - &gt;:”+ data);

var id ='timecount'+ data.mid;
var row ='&lt; div id =“RowDiv”&gt;&lt; div id =“'+ id +'”&gt;&lt; / div&lt; / div&gt;';

$(“#CounterDiv”)。html(row);
$('#'+ id).countdown({until:data.time});
},'json');
</ 代码> </ pre>
</ div>

展开原文

原文

Haven't tested the code but the point of my suggestion would be to avoid sending HTML in response and make getdetails.php respond with $mid and $time like:

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

Your JS code should look something like:

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');

dougui4325
dougui4325 欢迎你:)你应该接受他的回答
4 年多之前 回复
drz49609
drz49609 谢谢! 这也是我在努力的事情。 但是当我读到@ArmanOzak时,他的回答是想按照他的方式去做...
4 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问