on vs. bind

by doug65536

HTML

<div id="container">
    <form id="form">
        <button id="buttonA" class="A" type="button">A</button>
        <button id="buttonB" type="button">B</button>
        <button id="buttonC" type="button">C</button>
        <button id="buttonD" type="button">d</button>
    </form>
</div>


<button id="clearlog" type="button">Clear Log</button>
<button id="addbutton" type="button">Add button</button>
<div id="log"></div>

CSS

p {
    padding: 0;
    margin: 0;
    font-family: Courier New;
}

JavaScript

$(function() {
    var log = $('#log');
    var out = function(msg) {
        log.append($('<p>').text(msg));
    };
    $('#container').on('click', function(ev) {
        out('on #container, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#container').bind('click', function(ev) {
        out('bind #container, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#form').on('click', function(ev) {
        out('on #form, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#form').bind('click', function(ev) {
        out('bind #form, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#container button').on('click', '.A', function(ev) {
        out('on .A button, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#container button').on('click', function(ev) {
        out('on button, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#container button').bind('click', function(ev) {
        out('bind button, this=#' + $(this).attr('id') + ' target=#' + $(ev.target).attr('id'));
    });
    $('#clearlog').bind('click', function(ev) {
        log.empty();
    });
    var custom = 0;
    $('#addbutton').bind('click', function(ev) {
        ++custom;
        $('#form').append($('<button>')
                          .attr('id', 'custom' + custom)
                          .attr('type', 'button')
                          .text('custom ' + custom));
    });
});