jQuery Girl
  1. jQuery Girl
  3. Jquery: L’événement click ne fonctionne pas après append. (Je ne sais pas comment utiliser .ON)
Intereting Posts
Obtenir des valeurs d’atsortingbuts sous forme de tableau à partir de la sélection d’éléments à l’aide de jQuery Filtres SVG après clonage SVG FullCalendar js – Pour append du code HTML dans toutes les cellules d’un jour II PhantomJS exécutant JavaScript dans une fenêtre contextuelle pour l’extraction de données Équivalent Mootools de jQuery toggle ()? Slide au lieu de Fade pour un div Impossible de définir un point d’arrêt dans un fichier mappé source (exemple avec jquery) essayer de supprimer un élément de localstorage en utilisant le nom de clé .blur et .onblur en chrome Un simple appel ajax semble bloquer ‘event.layerX et event.layerY sont rompus et obsolètes dans WebKit.’ les erreurs jQuery: Comment appeler une fonction lorsque l’élément est affiché FormData vs .serialize (), quelle est la différence? jQuery UI autocomplete ne fonctionne pas dans IE Problème appelant l’api web asp.net DELETE de jqgrid

Jquery: L’événement click ne fonctionne pas après append. (Je ne sais pas comment utiliser .ON)

J’ai 2 événements de clic. On ajoute un IMG qui inclut un autre événement de clic. Cela ne fonctionne pas évidemment. Je sais que je dois utiliser le fichier .ON de jQuery, mais je n’arrive pas à comprendre comment et où.

Mon code: 

$( document ).ready(function() { // The one below (.choimh) isn't sortingggered anymore $('.choimg').click(function(){ }); // Switch to chosen color $('.color').click(function(){ $(".thumbs").append(''); }); });

Le fichier .color est à un endroit complètement différent de celui de .choimg.

Je n’arrive pas à comprendre comment utiliser .ON.

live delegate fonctions live ou delegate qui faisaient ce genre de chose. Maintenant, vous pouvez le faire comme ceci: 

 $(document).on('click', '.choimg', function(e) { //do whatever });

jQuery est sur fait beaucoup, mais dans votre cas particulier, vous voulez mettre “sur” sur un object DOM qui n’est pas chargé après le chargement du DOM. Cela permet à l’événement de se propager jusqu’à cet object DOM qui, à son tour, le délègue à l’élément DOM approprié en fonction du deuxième sélecteur que vous fournissez.

Si vous suivez le lien ci-dessus, il y a une tonne d’informations à ce sujet dans la documentation de jQuery. Ceci est particulièrement important pour votre cas …

Les gestionnaires d’événements ne sont liés qu’aux éléments actuellement sélectionnés. ils doivent exister sur la page au moment où votre code appelle l’appel à .on (). Pour vous assurer que les éléments sont présents et peuvent être sélectionnés, effectuez la liaison d’événement dans un gestionnaire de document prêt pour les éléments figurant dans le balisage HTML de la page. Si un nouveau code HTML est injecté dans la page, sélectionnez les éléments et associez des gestionnaires d’événements une fois le nouveau code HTML inséré dans la page. Ou utilisez des événements delegates pour attacher un gestionnaire d’événements, comme décrit ci-après.

Dans tous les cas, vous devez vous lier à ce qui existe déjà et fournir un deuxième sélecteur pour ce qui va être ajouté. Vous souhaitez que l’événement réel, ainsi que l’événement et la fonctionnalité soient souhaités. Quelque chose comme ça… 

 $('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() { alert('Do stuff here!'); });

Notez qu’il est important que la “chose qui existe” soit aussi basse que possible dans le DOM pour plus d’efficacité. Par exemple, il n’est pas préférable de placer le sélecteur sur le “corps” ou au niveau du document. Garde ça en tête.

J’espère que cela vous aidera à mieux comprendre ce que vous voulez faire. Je vous encourage fortement à lire la documentation jQuery car elle est très bonne.

Vous devriez utiliser quelque chose comme: 

 $(document).on("click", ".color", function() { //append code here });

Le prototype général est on(eventType, selector, function) , vous pouvez également utiliser d’autres événements.

Pour plus d’informations, voir ceci .