jQuery倒计时重新加载div

Question

我试着用jquery.countdown做一个倒计时。

其目的是设置倒计时的第一个日期，并在倒计时结束时重新加载特定的div，以便为新的倒计时设置新的日期。

我的问题是什么时候重新加载div。第二次倒计时永远不会开始。很可能，脚本不会重新加载。

下面是我的代码：

$(document).ready(function() {
  $('[data-countdown]').each(function() {
    var $this = $(this),
      finalDate = $(this).data('countdown');

    $this.countdown(finalDate, function(event) {
      $this.html(event.strftime('%H:%M:%S'));
      $this.countdown(finalDate)
        .on('update.countdown', function(event) { $this.html(event.strftime('%H:%M:%S')); })
        .on('finish.countdown', function() { $('#time').load(location.href + " #time"); });
    });
  });
});

<div id="time">
  <?php
  $h1=date("H:i");
  $date=date("Y-m-d");

  $sqlTime="select heure from table where heure>'$heure' and  dateReunion='$date' order by heure asc LIMIT 1";
  $resTime=mysql_query($sqlTime)  or exit('Erreur SQL ligne '.__LINE__.' : '.mysql_error());

  $newDate=mysql_result($resTime,0,0);
  $time=$date." ".$newDate.":00";

  ?>

  <button class="btn btn-primary btn-round" data-countdown="<?php echo $time; ?> "></button>
</div>
<script src="assets/js/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.countdown.js"></script>

我想，我必须重新加载js脚本，但我不知道该怎么做。

Answer 1

尝试使其成为一个命名函数，并在.load()回调中重新调用它：

$(document).ready(function() {

  function initCountdown(){
    $('[data-countdown]').each(function() {
      var $this = $(this),
        finalDate = $(this).data('countdown');

      $this.countdown(finalDate, function(event) {
        $this.html(event.strftime('%H:%M:%S'));
        $this.countdown(finalDate)
          .on('update.countdown', function(event) {
            $this.html(event.strftime('%H:%M:%S'));
          })
          .on('finish.countdown', function() {
            $('#time').load(location.href + " #time", initCountdown); // Recall the init function on load callback
          });
      });
    });
  }

  // on page first load.
  initCountdown();
});