on click demo

by doug65536

HTML

<div id="log"></div>
<div id="parent">
    <div id="A" class="a_foo">A</div>
    <div id="B">B</div>
    <div id="C" class="c_foo">C</div>
    <div id="D">D</div>
    <div id="E">E</div>
</div>

CSS

#parent div {
    position: relative;
    width: 64px;
    height: 64px;
    border: solid black 1px;
    margin: 16px;
}

#log {
    float: right;
}

JavaScript

$(function() {
    function log(msg) {
        $('#log').append($('<p>').text(msg));
    }
    
    $('#parent').on('click', ".a_foo", function() {
        log("a_foo class clicked");
    });
    $('#parent').on('click', "#D", function() {
        log("D id clicked");
    });
    $('#parent').on('click', function(event) {
        var element = $(event.target);
        log("something clicked, and its id is " + element.attr("id"));
    });
    $('#log').on('click', function() {
        $('#log').empty();
    });
});