jQuery '.each' и добавление события.click

Я не программист, но мне нравится создавать прототипы. Весь мой опыт исходит от ActionScript2.

Вот мой вопрос. Чтобы упростить мой код, я хотел бы выяснить, как присоединить события.click к div, которые уже существуют в теле 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>

Моя (неудачная) стратегия:
1) создать массив объектов:

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

2) итерации по массиву с помощью ".each" и добавьте каждый существующий div с событием ".click". Наконец, постройте локальную переменную.

вот прототип:

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

Ответ 1

Одним из решений, которое вы можете использовать, является назначение более обобщенного класса для любого div, к которому привязан обработчик события клика.

Например:

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

Ответ 2

Не нужно использовать .each. click уже связывается со всеми вхождениями div.

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

См. Демонстрацию

Примечание. Используйте жесткую привязку, такую как .click чтобы убедиться, что динамически загруженные элементы не привязаны.