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

jquery each

192,266

Solution 1

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

Solution 2

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.

192,266

Author by

hcc

Updated on July 09, 2022

Comments

hcc almost 2 years
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;  
});
});
```
hcc almost 11 years

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!
Neil.Allen almost 11 years

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.
Dev almost 7 years

Yes but that won't work on archives when you have a button on each entry.
another over 6 years

@Oriol is right, the other way is to use on() jQuery function. This way it will work with dynamic loaded content.
parttimeturtle over 3 years

This explanation helped immensely, thank you.