jquery倒计时事件完成时没有显示预期的html

Question

我一直在用两个日期参数进行jquery倒计时过程。但当第二个日期参数结束时，预期的html并没有显示（"已关闭"）。

 $('#date_regist').countdown(s)
    .on('update.countdown', function(event) {   
    $(this).html("<b>will be open </b>"+event.strftime(format));})
    .on('finish.countdown', function(event) {
        $(this).countdown(f)
        .on('update.countdown', function(event) {
        $(this).html("<b> is open for </b>"+event.strftime(format));})
        .on('finish.countdown', function(event) {
        $(this).html("<b> is closed.</b>");
        });
    });
</script>

预期的脚本可以看到jsfiddle

Answer 1

您可以删除元素倒计时并添加新的：

小提琴：http://jsfiddle.net/dss5vkf7/3/

var s = '2015/10/19';
f = '2015/12/09';
format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';
$('#date_regist').countdown(s)
  .on('update.countdown', function(event) {
    $(this).html("<b>will be open </b>" + event.strftime(format));
  })
  .on('finish.countdown', function(event) {
  	$("#date_regist").remove()
  	$("body").append('<span id="date_regist"></span>')
    $("#date_regist").countdown(f)
      .on('update.countdown', function(event) {
        $(this).html("<b> is open for </b>" + event.strftime(format));
      })
      .on('finish.countdown', function(event) {
        $(this).html("<b> is closed.</b>");
      });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://rc.sefunsoed.org/assets/js/countdown/jquery.countdown.min.js"></script>
The registration <span id="date_regist"></span>

Answer 2

重复使用第一个倒计时来主持第二个倒计时似乎会影响finish.countdown事件行为。

我添加了第二个跨度，并使用第二个跨距创建了第二次倒计时。

            var s = '2015/12/08';
            f = '2015/12/09';
            format = '%-w <sup>week%!w</sup> ' + '%-d <sup>day%!d</sup> ' + '%H <sup>hr</sup> ' + '%M <sup>min</sup> ' + '%S <sup>sec</sup>';
            $('#date_regist').countdown(s)
              .on('update.countdown', function(event) {
                $(this).html("<b>will be open </b>" + event.strftime(format));
              })
              .on('finish.countdown', function(event) {
                $('#date_regist2').countdown(f)
                  .on('update.countdown', function(event) {
                    $(this).html("<b> is open for </b>" + event.strftime(format));
                  })
                  .on('finish.countdown', function(event) {
                    $(this).html("<b> is closed.</b>");
                  });
              });
          });