Menu
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; }); }); 
421
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'); }); }); 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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
