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

Question

我一直在用两个日期参数做 jquery 倒计时过程。但是当第二个日期参数结束时，预期的 html 并没有出现，即 ("is closed").

 $('#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

似乎重复使用第一个倒计时主持第二个倒计时会影响 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>");
                  });
              });
          });

Answer 2

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

fiddle: 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>

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

jquery countdown event on finish did not show intended html

jquery

html

countdown