55

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;  
});
});
3
  • 3
    Is this what you are looking for ?
    – karthikr
    Sep 23, 2013 at 18:30
  • 2
    That appears to work, what's the problem? jsfiddle.net/PV7Gj
    – Jason P
    Sep 23, 2013 at 18:35
  • 2
    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, 2013 at 18:36

2 Answers 2

118

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'); 
    });
});
2
  • 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, 2013 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, 2013 at 13:31
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.

3
  • 2
    Yes but that won't work on archives when you have a button on each entry.
    – Sam
    Sep 26, 2017 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, 2018 at 15:19
  • This explanation helped immensely, thank you. Mar 16, 2021 at 20:16

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.