Comment lier Datepicker de jQuery après actualisation Ajax?
J'ai un datepicker de jQuery qui fonctionne très bien pour moi, sauf quand je frais le contenu via ajax, je perds le contrôle datepicker. À partir de ce que je peux dire que je devrais être à l'aide de jQuery sur() pour lier à l'entrée, mais je n'arrive pas à trouver le bon événement pour la lier à.
Fonctionne la première fois, mais pas sur l'actualisation ultérieure:
$("[id^=startPicker]").datetimepicker({
showOn: "button",
buttonImage: "/img/calendar_icon.png",
buttonImageOnly: true,
dateFormat: 'mm/dd/yy',
timeFormat: 'hh:mm tt',
stepMinute: 1,
onClose: function (dateText, inst) {
var selectedDate = $(this).datepicker("getDate"); //Date object
$.ajax({
url: "/url",
dataType: "json",
method: 'post',
data: {
value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
},
beforeSend: function () {
$("#loading").fadeIn();
},
success: function (data, textStatus) {
$("#content").html(data);
},
complete: function () {
$("#loading").fadeOut();
}
});
}
});
Ne se lient pas la première fois ou sur l'actualisation ultérieure:
$('#content').on('ready', "[id^=startPicker]", function () {
$(this).datetimepicker({
showOn: "button",
buttonImage: "/img/calendar_icon.png",
buttonImageOnly: true,
dateFormat: 'mm/dd/yy',
timeFormat: 'hh:mm tt',
stepMinute: 1,
onClose: function (dateText, inst) {
var selectedDate = $(this).datepicker("getDate"); //Date object
$.ajax({
url: "/url",
dataType: "json",
method: 'post',
data: {
value: selectedDate.toDateString() + ' ' + selectedDate.toTimeString()
},
beforeSend: function () {
$("#loading").fadeIn();
},
success: function (data, textStatus) {
$("#content").html(data);
},
complete: function () {
$("#loading").fadeOut();
}
});
}
});
});
- Vous ne pouvez pas déléguer ce plugin avec la
.on()
événement hors de la boîte. Vous aurez besoin de ré-instancier le plugin sur les éléments dans le.success()
de rappel. - prêt événement est utilisé uniquement sur le document même, vous pouvez le lier à d'autres éléments. Mais l'aide .sur() syntaxe, ce ne sera pas déclenché après l'événement ready est fait, contrairement à l'utilisation de l'alias $().prêt()
Vous devez vous connecter pour publier un commentaire.
Le jQuery
.on()
fonction de report de la gestion des événements, mais il ne fonctionne pas pour l'initialisation du plugin.Il travaille pour des événements, car le modèle DOM propage des événements à partir des éléments du DOM de leurs éléments parents, tout le chemin vers le haut. Ainsi, lorsque vous cliquez sur un lien, vous êtes également en cliquant sur ce que contient ce lien (un
div
par exemple), ce que contient le récipient, et ainsi de suite tout le chemin jusqu'à labody
balise et, éventuellement, ledocument
lui-même..on()
profite de ceci pour la liaison à l'événement click d'un parent commun élément au lieu de la dynamique des éléments d'enfant, et l'enfant les éléments peuvent être ajoutés/supprimés sans perdre le gestionnaire d'événement sur le parent.L'initialisation du Plugin ne fonctionne pas de cette façon, si. Pour initialiser un plugin sur un élément cible, il doit être fait sur l'élément lui-même ce qui signifie que l'élément doit être dans les DOM à l'époque. Ainsi, lorsque vous ajoutez de nouveaux éléments de façon dynamique, vous avez besoin de cibler ces nouveaux éléments et de les initialiser le plugin sur eux. Si votre
success
fonction à partir de l'appel AJAX aurait besoin de le faire.Note que, depuis votre appel AJAX est lui-même à l'intérieur de de votre initialisation, vous allez avoir besoin de diviser certains de ces dans la séparation des fonctions à des fins de réutilisation. Sinon, cette ré-initialisation serait nid à l'intérieur de lui-même indéfiniment.
Peut-être quelque chose comme ceci:
C'est, bien sûr, libre à la main le code non testé juste pour illustrer le concept. Elle peut exiger un peu de peaufinage, et il peut y avoir une façon plus élégante de faire la même logique.
$("[id^=startPicker]").each(function() { bindDatePicker(this); });
fonctionne parfaitement pour la liaison au chargement de la page, mais:$("#content").find("[id^=startPicker]").each(function () { bindDatePicker(this); });
ne semble pas être en cours d'exécution, au moins selon le firefox ddebugger. J'ai aussi essayé de l'appeler sur le succès d'autres fonctions ajax et d'obtenir la même chose.success
gestionnaire est appelé ensuite, il devrait être d'atteindre la ligne de code.Vous ne pouvez pas déléguer plugin, délégation est pour écouteur d'événement seulement. Utiliser le succès fonction de rappel et reinitailize datepicker plugin, une fois ciblée l'élément est ajouté
J'ai un problème similaire: Après une requête ajax de rechargement de la page je ne peux pas fixer de nouveaux datepicker avec $(element).datepicker(). Parce que Datepicker seulement une fois propre de l'initialisation, j'ai juste mis directement après ajax succès:
Maintenant, la prochaine $(element).datepicker() va provoquer une nouvelle initialisation. Cela affecte toutes les datepicker sur le côté, de sorte que vous pouvez avoir réinitialiser datpicker à l'extérieur de l'ajax-conteneur.
En fait, la façon la plus simple que j'ai trouvé pour ce faire est tout simplement en mettant le lier le code au sein de la réussite de la fonction comme ceci:
ELEMENT.datepicker();
.Par exemple:
$('.datepicker').datepicker();
Code complet: