jQuery '.each' and attaching '.click' event

Question

I am not a programer but I enjoy building prototypes. All of my experience comes from actionScript2.

Here is my question. To simplify my code I would like to figure out how to attach '.click' events to div's that are already existing in the HTML body.

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

My (failed) strategy was:
1) make an array of objects:

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

2) iterate through the array with '.each' and augment each existing div with a '.click' event. Lastly, construct a local variable.

here is a prototype:

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

Is [this](http://jsfiddle.net/Jwqfg/) what you are looking for ? — karthikr, Sep 23 '13 at 18:30
That appears to work, what's the problem? http://jsfiddle.net/PV7Gj/ — Jason P, Sep 23 '13 at 18:35
Your code already does everything it's coded to do. did you actually want to do something with the key variable inside the click event? — Kevin B, Sep 23 '13 at 18:36

Neil.Allen · Accepted Answer · 2013-09-23T19:04:29.293

117

One solution you could use is to assign a more generalized class to any div you want the click event handler bound to.

For example:

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

edited Sep 23 '13 at 19:04

answered Sep 23 '13 at 18:41

Neil.Allen

1,606
1
15
20

2

Interesting can you include variables in div's? is that valid HTML? Thanks for all of the input folks! In the act of writing this prototype and post I seem to have worked out the problem. Indeed it does wort just fine! but thank you all for your contributions! – hcc Sep 25 '13 at 11:36
3

These are not so much variables, as attributes. The id and class are pretty standard, but you can append data-{name} to elements and access the content with $(this).data('{name}'); This is valid html5. – Neil.Allen Sep 25 '13 at 13:31

score 28 · Answer 2 · answered Nov 19 '15 at 23:46

28

No need to use .each. click already binds to all div occurrences.

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

See Demo

Note: use hard binding such as .click to make sure dynamically loaded elements don't get bound.

answered Nov 19 '15 at 23:46

Oriol

11,660
5
35
37

2

Yes but that won't work on archives when you have a button on each entry. – Dev Sep 26 '17 at 23:42
1

@Oriol is right, the other way is to use `on()` jQuery function. This way it will work with dynamic loaded content. – another Jan 10 '18 at 15:19
This explanation helped immensely, thank you. – parttimeturtle Mar 16 '21 at 20:16

jQuery '.each' and attaching '.click' event

2 Answers2

Linked