web-dev-qa-db-fra.com

jQuery '.each' et attacher un événement '.click'

Je ne suis pas un programmeur mais j'aime construire des prototypes. Toute mon expérience vient d’actionScript2.

Voici ma question. Pour simplifier mon code, je voudrais savoir comment attacher des événements '.click' à des événements div existant déjà dans le corps HTML.

<body>
<div id="dog-selected">dog</div>
<div id="cat-selected">cat</div>
<div id="mouse-selected">mouse</div>

<div class="dog"><img></div>
<div class="cat"><img></div>
<div class="mouse"><img></div>
</body>

Ma stratégie (ratée) était la suivante:
1) faire un tableau d'objets:

var props = {
"dog": "false",
"cat": "true",
"mouse": "false"
};

2) parcourez le tableau avec '.each' et augmentez chaque div existante avec un événement '.click'. Enfin, construisez une variable locale.

voici un prototype:

$.each(props, function(key, value) {    
$('#'+key+'-selected').click(function(){
var key = value;  
});
});
jqueryeach
43
hcc

Une solution que vous pouvez utiliser consiste à affecter une classe plus généralisée à toute div à laquelle vous souhaitez que le gestionnaire d'événements click soit lié.

Par exemple:

HTML:

<body>
<div id="dog" class="selected" data-selected="false">dog</div>
<div id="cat" class="selected" data-selected="true">cat</div>
<div id="mouse" class="selected" data-selected="false">mouse</div>

<div class="dog"><img/></div>
<div class="cat"><img/></div>
<div class="mouse"><img/></div>
</body>

JS:

$( ".selected" ).each(function(index) {
    $(this).on("click", function(){
        // For the boolean value
        var boolKey = $(this).data('selected');
        // For the mammal value
        var mammalKey = $(this).attr('id'); 
    });
});
74
Neil.Allen

Pas besoin d'utiliser .each. click se lie déjà à toutes les occurrences div.

$('div').click(function(e) {
    ..    
});

voir démo

Remarque: utilisez une liaison ferme telle que .click _ pour vous assurer que les éléments chargés dynamiquement ne sont pas liés.

18
Oriol