jQuery événement cliqué délégué à datetimepicker besoin de cliquer deux fois

Question

J'ai du contenu qui est dynamiquement ajouté dans la page d'index via des appels ajax avec l'API d'historique (j'utilise pushstate et onpopstate).

Pour une page spécifique qui sera chargé, j'ai un formulaire avec un champ de date comme ceci:

<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> 

de la page d'index Je veux joindre un événement de clic pour DateTimePicker1 afin que le widget datetimepicker INITIALISATION montrer. J'utilise cet extrait:

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

Le problème est que je dois cliquer deux fois sur le datepicker avant le widget apparaît.

Après cela, le fichier datepicker s'affiche directement lorsque vous cliquez pour la troisième fois.

J'ai essayé d'envelopper ce qui précède avec $ (document) .ready (function() {} mais cela n'a pas fonctionné, parce que je pense que le contenu ajouté avec des appels ajax via innerhtml ne déclenche pas un rechargement de page. Les gens ont dit d'utiliser des événements délégués que je fais comme vous pouvez le voir et ça ne marche toujours pas

Quelqu'un a eu des idées sur ce pourquoi cela se produit? J'ai également essayé d'inspecter le code avec les outils de développement de Google à partir du volet de la console: monitorEvents (window, "click") et $ ._ data (($ 0), "events") mais il est trop verbeux et je ne sais pas comment utiliser les informations pour le débogage comme le bubbling de l'événement

Merci de votre aide !

Answer 1

Votre problème est que vous ajoutez datepicker click sur #container - c'est probablement une div qui enveloppe tout:

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

Alors première fois que vous cliquez sur vous ajoutez en fait datepicker sur votre conteneur, votre code devrait ressembler à ceci sans aucun événement onclick:

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

Vous devez également envelopper ce sur la création d'éléments si cela est fait dynamiquement.