javascript - 使用 on 获取生成的日期并重用它 jquery

Question

有一个由 jquery 插件生成的日期列表。我可以使用 moment.js 来完成此操作，并且它有效:

请参阅此 fiddle ( http://jsfiddle.net/UJ9z4/ )。

当我尝试将其应用到运行插件的实时文件时，出现未定义的错误。

我理解这意味着我无法获取日期，因为它是在 DOM 中新创建的。因此，我尝试在加载后使用“on”来获取跨度的内容，但它不起作用。我尝试过以不同的方式查看不同的线程，但似乎都不起作用。

这是代码

    <!--template for calendar list -->      
    <div id="cactuscal">
   <div class="gcf-item-container-block">
  <div class="gcf-item-block">
    <div class="gcf-item-header-block">
      <div class="gcf-item-date-block">
        <span class="gcf-item-daterange"></span>
      </div>
      <div class="gcf-item-title-block">
        <strong class="gcf-item-title"></strong>
      </div>
    </div>
    <div class="gcf-item-body-block">
      <div class="gcf-item-description">
      </div>
      <div class="gcf-item-location">
      </div>
    </div>
  </div>
</div>
</div><!--template for calendar list -->        
    <script type="text/javascript">

      $('#cactuscal').gCalFlow({
        calid: 'myaddress@gmail.com',
        link_item_title: false,
         maxitem: 6,
    daterange_formatter: function(sd, ed, allday_p) { return "<span class='startdate' data-date='" + (sd.getFullYear()) + "-" + (sd.getMonth() + 1) + "-" + (sd.getDate()) +"'>" + "</span>" + " – " + "<span id='enddate'"+">" + (ed.getFullYear()) + "-" + (ed.getMonth() + 1) + "-" + (ed.getDate()) + "</span>" }
      });

    </script>
<script type="text/javascript">
$(document).on("ready",function(){
    $('.startdate').each(function () {
    var then = $(this);

date = moment(then.attr('data-date')),
update = function(){
    then.html(date.format("dddd[(]M[/]D[)]"));
    then.trigger('onCreated');
};

update();
setInterval(update, 60000);
});
    });
</script>

gcalflow 中没有选项可以按照我想要的方式格式化日期范围，所以我想使用 moment 来获取字符串并以这种方式重新格式化。

我需要在 gcalpro 脚本中创建一个新选项来按照我想要的方式格式化吗？或者这会起作用吗？html 部分是谷歌日历提要的模板。第一个 js 是调用 gcalflow 以显示日历提要。最后一个js是对格式化后的日期进行重新格式化。

Answer 1

gCalFlow 调用是异步工作的，因此用于更新元素的代码会在创建 gCalFlow 中的 DOM 元素之前调用。 (您无法准确知道 gCalFlow 何时创建元素)

您应该做的是将代码添加为 cCalFlow 调用中的回调函数。这样，cCalFlow 完成后就会调用它。

$('#cactuscal').gCalFlow({
    calid: 'myaddress@gmail.com',
    link_item_title: false,
    maxitem: 6,
    daterange_formatter: function(sd, ed, allday_p) {
        return "<span class='startdate' data-date='" + (sd.getFullYear()) + "-" + (sd.getMonth() + 1) + "-" + (sd.getDate()) + "'>" + "</span>" + " – " + "<span id='enddate'" + ">" + (ed.getFullYear()) + "-" + (ed.getMonth() + 1) + "-" + (ed.getDate()) + "</span>"
    },
    callback: afterGCalFlowIsFinished
});

function afterGCalFlowIsFinished(){
    $('.startdate').each(function() {
        ...
    }
}