jQuery '.each' und Anhängen '.click' Ereignis

Ich bin kein Programmierer, aber ich genieße es, Prototypen zu bauen. All meine Erfahrung kommt von actionScript2.jQuery '.each' und Anhängen '.click' Ereignis

Hier ist meine Frage. Um meinen Code zu vereinfachen, würde ich gerne herausfinden, wie man ".click" -Ereignisse an divs anhängt, die bereits im HTML-Body vorhanden sind.

<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>

Meine (nicht) Strategie war:
1) ein Array von Objekten machen:

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

2) mit '.each' durch das Array iterieren und erweitern jedes bestehende div mit einem ' .click 'Ereignis. Zuletzt konstruiere eine lokale Variable.

hier ist ein Prototyp:

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

Quelle

2013-09-23 hcc

Ist [dies] (http://jsfiddle.net/Jwqfg/) was Sie suchen? – karthikr

Das scheint zu funktionieren, was ist das Problem? http://jsfiddle.net/PV7Gj/ –

Ihr Code tut bereits alles, was es zu tun hat. Wolltest du wirklich etwas mit der Schlüsselvariable im Click-Event machen? –

Eine Lösung, die Sie zu jedem div eine allgemeinere Klasse verwenden, können Sie die Click-Ereignishandler gebunden wollen, ist zu vergeben.

Zum Beispiel:

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'); 
    }); 
});

Quelle

2013-09-23 18:41:41

Interessant können Sie Variablen in Divs aufnehmen? ist das gültige HTML? Vielen Dank für alle Input-Leute! Beim Schreiben dieses Prototyps und Posts habe ich das Problem offenbar herausgearbeitet. In der Tat ist es gut! aber danke euch allen für eure Beiträge! – hcc

Dies sind nicht so viele Variablen, wie Attribute. Die ID und die Klasse sind ziemlich Standard, aber Sie können Daten {Name} an Elemente anfügen und auf den Inhalt mit $ (this) .data ('{name}') zugreifen; Dies ist gültig html5. –

Wow Man, arbeitete gerne einen Charme, einfache und ausgezeichnete Lösung !!! –

Keine Notwendigkeit .each zu verwenden. click bindet bereits an alle div Vorkommen.

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

See Demo

Hinweis: Fest Bindung wie .click verwenden sicher dynamisch geladene Elemente gebunden werden nicht zu machen.

Quelle

2015-11-19 23:46:02 Oriol

Dies sollte die Antwort sein, es sei denn, Sie benötigen den Index aus der obigen Antwort. – Tunn

Ja, aber das funktioniert nicht in Archiven, wenn Sie bei jedem Eintrag eine Schaltfläche haben. – Dev

@Oriol ist richtig, der andere Weg ist 'on()' jQuery-Funktion zu verwenden. Auf diese Weise funktioniert es mit dynamisch geladenen Inhalten. – another

jQuery '.each' und Anhängen '.click' Ereignis

Antwort

Verwandte Themen