1

我已经在我的脚本中实现了 bootstrap daterangepicker，它第一次运行良好。如果我再次单击该链接（我在其中实现了 daterangepicker 并使用 AJAX 调用加载页面内容），则引导 daterangepicker 不起作用。

我正在使用 ajax 加载页面正文内容。我已包含日期范围选择器脚本并将文件包含在页面正文内容中。

我已经在 J​​Query ready() 函数中实现了 daterangepicker。

这是我的代码，我已经实现了。

HTML 代码：

     <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
           <i class="icon-calendar icon-large"></i>
           <span></span> <b class="caret" style="margin-top: 8px"></b>
      </div>

JS代码：

 $(document).ready(function() {

       $('#reportrange').daterangepicker({
                    ranges: {
                       'Today': [new Date(), new Date()],
                       'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                       'Last 7 Days': [moment().subtract('days', 6), new Date()],
                       'Last 30 Days': [moment().subtract('days', 29), new Date()],
                       'This Month': [moment().startOf('month'), moment().endOf('month')],
                       'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
                    },                        
                    format: 'MM/DD/YYYY',
                    separator: ' to ',
                    startDate: moment().subtract('days', 6),

                 },
                 function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                    start = start.format('MMMM D, YYYY');
                    end = end.format('MMMM D, YYYY');
                    test(start,end);

                 }
              );
      $('#reportrange span').html(moment().subtract('days', 6).format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));

});

请帮我解决我的问题。

4

1 回答 1

0

jQuery 的文档就绪功能会在页面的 DOM 内容加载后立即触发 - 这通常发生在渲染之前，但几乎总是在对服务器的任何 AJAX 调用可以加载您的任何内容之前，包括您的reportrangediv。这意味着一旦reportrange加载了带有 html 的 ajax 调用，您将需要$('#reportrange').daterangepicker({再次触发该内容。

幸运的是，jQuery 知道我们有时需要这样做，所以问题是你想把它放在哪里。

如果您以显式方式加载您的报告范围 div，例如

$(".rangeArea").load("reportRange");

然后 jQuery 为您提供回调选项：

$(".rangeArea").load("reportRange", function() {
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

如果您以其他方式加载您的 ajax 区域，您可能希望通过全局 ajax 完成处理程序连接您的选择器代码 - 这会在每次ajax 调用后触发，所以如果您有很多来回通信，请务必小心：

$.ajaxComplete(function(){
    $('#reportrange').daterangepicker({
        // ... your picker code here ...
    });
});

另一件可能会让您摆脱困境的事情是您正在调用您的<div id=reportrange>，这意味着页面上只能有一个 - 请记住 id 属性在页面上必须是唯一的，即使稍后加载内容也是如此。如果您在同一页面上可能有第二个reportrange，您可能希望从 ID 切换到类名：<div class=reportrange>和$(".reportrange").

最后一件事 -jQuery(document).ready(function(){...})可以写得更简洁$(function(){...})

于 2013-06-07T15:47:42.453 回答