Question

我正在使用以下代码显示内联日期选择器;

    $('.show_datepicker').datepicker({
        weekStart:  1,
        startDate : '2013-07-31',
        endDate : '2013-09-30',
        format : 'yyyy-mm-dd',
    }).on('changeDate', function(e){
        $('.datepicker-inline').on('click', '.datepicker_days:not(.disabled)', function() {
            $('.loading').show(); // Show loading icon
            $("#loading_div").load("loading_url.php",function(){
                $('.loading').hide(); // Hide loading icon when finished
            });
        });
    });

问题1

这一切都很有效，除了我第一次点击一天时不会触发这一事实。在初始点击之后，只要我在页面上就可以了。但是每当我刷新页面时，我都必须第一次点击任何日期才能让它继续工作。

我想这是因为函数内部的单独onclick事件，但我需要从调用中排除所有.disabled天，并且无法让它工作。

问题2

console.log（）告诉我多次触发 - 当我第二次点击它时它会发射4次，当我再次点击它时它会发射6次，依此类推。 / p>
任何想法都将不胜感激！

更新

这是渲染的datepicker的html代码：

<div id="datepicker" class="show_datepicker table table-hover table-striped" data-date="2013-08-01"> <div class="datepicker datepicker-inline"> <div class="datepicker-days" style="display: block;"> <table class=" table-condensed"> [...] <tbody> <tr> [...] <td class="datepicker_days day alternative" id="2013-08-12">12</td> <td class="datepicker_days day alternative" id="2013-08-13">13</td> <td class="datepicker_days day" id="2013-08-14">14</td> <td class="datepicker_days day inaktiv btn-link disabled" id="2013-08-15">15</td> <td class="datepicker_days day" id="2013-08-16">16</td> <td class="datepicker_days day" id="2013-08-17">17</td> <td class="datepicker_days day disabled inaktiv btn-link" id="2013-08-18">18</td> [...] </tr> </tbody> [...] </table> </div> </div>

Answer 1

如果点击changeDate日期时.disabled没有触发，那么您无需担心过滤无效日期。您可以删除您正确怀疑导致多次点火并且没有响应第一次点击的点击处理程序 - 您没有更改日期，因此点击处理程序未注册。

.on('changeDate', function(e){
    // won't fire on a .disabled date anyway
    $('.loading').show(); // Show loading icon
    $("#loading_div").load("loading_url.php",function(){
        $('.loading').hide(); // Hide loading icon when finished
    });
});

首次单击时，Bootstrap datepicker不会触发

1 个答案: