jQuery ne peut pas lier l'événement à L'élément chargé AJAX en utilisant.sur() [en double]
cette question a déjà une réponse ici:
à l'Aide .charge, je charge le contenu suivant dans # step_2 div:
<div id="step_2">
Select a subcategory:
<select id="subcategory_id" name="subcategory_id">
<option value="0">All subcategories</option>
<option value="68">Cool</option>
<option value="15">Cooler</option>
<option value="74">Excellent</option>
</select>
</div>
j'essaie alors de détecter quand l'utilisateur sélectionne quelque chose:
$("#subcategory_id").on("change", function(){
alert( 'Success!' );
});
mais sans succès. Personne ne voir ce que je fais mal? Aider grandement apprécié.
NOTES:
voici le chemin CSS complet vu par FireBug:
html.js body div#container div#main form div#step_2 select#subcategory_id
voici le fichier javascript complet, si le contexte importe:
$(document).ready(function() {
$("#category_id").change(function() {
$("#spinner").show();
$("#step_2").load("process.php?selected=category", { value: $(this).val() }, function() {
// Do something to say the data has loaded sucessfully
$("#spinner").hide();
});
});
$("#subcategory_id").on("change", function(){
alert( 'Success!' );
});
});
5 réponses
Dans ce cas, vous devez utiliser on d'une manière similaire à delegate , la syntaxe que vous utilisez est le remplacement de bind .
$("#step_2").on("change", "#subcategory_id", function(){
alert( 'Success!' );
});
Le premier sélecteur doit être un élément qui ne sera pas remplacé. De cette façon, lorsque l'événement bulles jusqu'à ce point, il est pris. Vous spécifiez alors l'élément réel qui déclenchera l'événement comme deuxième paramètre de .on .
on(...) ne s'abonnera pas aux événements qui ne sont pas encore sur la page sans la configuration appropriée. Pour faire ce que vous voulez, vous devriez essayer ce qui suit:
$(document).on("change", "#subcategory_id", function(){
alert( 'Success!' );
});
pour rendre cela plus efficace, vous devriez remplacer $(document) par le parent le plus proche de l'élément que vous savez sera sur la page quand ce code est appelé.
vous devez lier le gestionnaire après avoir chargé le html, ou utiliser
$("#step_2").on("change", "#subcategory_id", function(){
alert( 'Success!' );
});
bien Sûr qu'il le peut,
$(document).on("change", "#subcategory_id", function(){...});
Pour déléguer les événements de l'aide .on, fournit un élément parent à lier, puis le sélecteur à déléguer.
Vous devez définir l'événement, après que vous avez chargé le nouvel élément. Comme AJAX est asynchrone, vous devez avoir un rappel dans votre charge.
$(document).ready(function() {
$("#category_id").change(function() {
$("#spinner").show();
$("#step_2").load("process.php?selected=category", { value: $(this).val() },
function() {
// Do something to say the data has loaded sucessfully
$("#spinner").hide();
$("#subcategory_id").on("change", function(){
alert( 'Success!' );
});
});
});
});