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;
});
});
No need to use .each. click already binds to all div occurrences.
$('div').click(function(e) {
..
});
Note: use hard binding such as .click to make sure dynamically loaded elements don't get bound.
Source: Stackoverflow.com