完成後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) { 
 
    \t $("#date_regist").remove() 
 
    \t $("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>"); 
        }); 
       }); 
      });