Bootstrap datepicker doesn't fire on first click

Question

I'm using the following code for displaying an inline datepicker;

    $('.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
            });
        });
    });

Problem 1

It all works very well, beside the fact that it doesn't fire when I click a day for the first time . After that initial click it's ok as long as I'm on the page. But everytime I refresh the page, I have to click any date for that first time to get it to work afterwards.

I suppose it's because of the seperate onclick event inside the function, but I need that to exclude all .disabled days from the call and just can't get it to work.

Problem 2

console.log() tells me it's firing multiple times - when I click it for the second time it's firing 4 times, when I click it again it's firing 6 times, and so on.

Any ideas will be greatly appreciated!

Update:

This is the html-code for the rendered datepicker:

<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

If changeDate does not fire when clicking on .disabled dates then you do not need to worry about filtering invalid dates. You can remove the click handler which you correctly suspect is causing your multiple firings and not responding to the first click -- You didn't change the date yet so the click handler wasn't registered.

.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
    });
});