web-dev-qa-db-fra.com

Jquery: l'événement Click ne fonctionne pas après l'ajout. (Je ne sais pas comment utiliser .ON)

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

Mon code:

$( document ).ready(function() {
    // The one below (.choimh) isn't triggered anymore
    $('.choimg').click(function(){

    });

    // Switch to chosen color
    $('.color').click(function(){
        $(".thumbs").append('<a href="#"><img id="image'+u+'" class="choimg" src="/img/products/mini/'+colnumber+'-'+ i + '.jpg" />');
    });
});

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

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

jqueryappend
19
user2669261

Ce sont les fonctions live ou delegate qui ont fait ce genre de choses. Maintenant, vous pouvez le faire comme ceci:

$(document).on('click', '.choimg', function(e) {

//do whatever

});
46
Phillip Schmidt

jQuery's on fait beaucoup, mais pour votre cas spécifique, vous voulez mettre "on" sur un objet DOM qui n'est pas chargé après le chargement du DOM. Cela permet à l'événement de se propager jusqu'à cet objet DOM qui, à son tour, délègue l'événement à 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 jQuery. Plus précisément, cela est 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 fait l'appel à .on (). Pour vous assurer que les éléments sont présents et peuvent être sélectionnés, effectuez une liaison d'événement dans un gestionnaire de document prêt pour les éléments qui se trouvent dans le balisage HTML de la page. Si du nouveau code HTML est injecté dans la page, sélectionnez les éléments et attachez les gestionnaires d'événements une fois le nouveau code HTML placé dans la page. Ou, utilisez des événements délégués pour attacher un gestionnaire d'événements, comme décrit ci-dessous.

Dans tous les cas, vous devez vous lier à la chose qui existe déjà et fournir un deuxième sélecteur pour la chose qui va être ajoutée et que vous voulez avoir l'événement réel, avec l'événement et la fonctionnalité. 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 faible que possible pour l'obtenir 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 permettra de mieux comprendre ce que vous voulez faire. Je fortement vous encourage à lire la documentation jQuery car elle est très bonne.

11
JasCav

Vous devez 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 this .

2
Mateusz