jQuery delegierte Click-Ereignis zu datetimepicker müssen zweimal klicken

Question

Ich habe Inhalt, der dynamisch in die Indexseite über AJAX-Aufrufe mit der Geschichte API hinzugefügt wird (ich verwende PushState und OnPopstate).

für eine bestimmte Seite, die geladen wird ich ein Formular mit einem Datumsfeld wie diese:

<tr> 
    <td class='input-group date' id='datetimepicker1'> 
    <input style='width: 250px; border: 0; outline: none; name='invoicedate' value='2017-10-01' data-date-format='YYYY-MM-DD'> 
    <span class='input-group-addon'> 
     <span class='glyphicon glyphicon-calendar'></span> 
    </span> 
    </td> 
</tr> 

von der Indexseite ich so ein Click-Ereignis zu DateTimePicker1 anhängen mag, dass die Bootstrap Datetime Widget Show. Ich benutze diesen Schnipsel:

$("#container").on("click", "#datetimepicker1", function(){ 
    $("#datetimepicker1").datetimepicker({ 
    locale: 'nl', 
    format: 'YYYY-MM-DD', 
    allowInputToggle: true, 
    useCurrent: false, 
    }); 
}); 

Das Problem ist, dass ich zweimal auf dem Datepicker klicken, bevor das Widget angezeigt wird.

Danach erscheint der Datepicker direkt beim dritten Klick.

Ich habe versucht, das oben mit $ (Dokument) .ready (function() {} zu wickeln, aber das hat nicht funktioniert, weil ich denke, der hinzugefügte Inhalt mit Ajax Aufrufe über innerhtml feuert eine Seite neu laden Leute sagten zu delegierten Ereignissen zu verwenden, die ich tun, wie Sie sehen können, und es funktioniert immer noch nicht

Jeder bekam Gedanken darüber, warum dies passiert? Ich habe auch versucht, den Code mit Google Developer Tools aus der Konsole zu inspizieren: monitorEvents (Fenster, "click") und $ ._ data (($ 0), 'events'), aber es ist zu ausführlich und ich weiß nicht, wie man die Informationen zum Debuggen wie Event-Bubbling verwendet.

Vielen Dank für Ihre Hilfe !

Answer 1

Ihr Problem ist, dass Sie picker auf, klicken Sie auf #container sind Zugabe - das ist wahrscheinlich einige div, dass hüllt alles: Sie sind Sie also erstmals tatsächlich

$("#container").on("click", "#datetimepicker1", function(){ 
    $("#datetimepicker1").datetimepicker({ 
    locale: 'nl', 
    format: 'YYYY-MM-DD', 
    allowInputToggle: true, 
    useCurrent: false, 
    }); 
}); 

klicken picker auf dem Container hinzufügen, Code sollte so aussehen ohne Onclick-Ereignis:

$("#datetimepicker1 input[name='invoicedate']").datetimepicker({ 
    locale: 'nl', 
    format: 'YYYY-MM-DD', 
    allowInputToggle: true, 
    useCurrent: false, 
}); 

Sie müssen dies auch bei der Elementerstellung einbinden, wenn dies dynamisch erfolgt.