Namespacing events

Makes it easier to on/off particular events.

by Steven Senkus

HTML

<input id="target" type="text" />
<button type="button">Remove event</button>
<pre id="output-always"></pre>

<pre id="output-toggle-event"></pre>

JavaScript

$('#target').bind('input', function () {
    $('pre#output-always').append($(this).val());
});

$('#target').bind('input.toggle-event', function () {
    $('pre#output-toggle-event').append('<span style="color:#f00;">' + $(this).val() + '</span>');
});

$('#target').bind('input', function () {
    $(this).val('')
})

var toggleEvent = true;

$('button').on('click', function () {
    console.log(toggleEvent);
    if (toggleEvent) {
        $('#target').unbind('input.toggle-event');
         $('button').text('Add event');
        toggleEvent = false;
    } else {
        console.log('got here')
        $('#target').bind('input.toggle-event', function () {
            console.log('here', $('pre#output-toggle-event'));
            $('pre#output-toggle-event').append('<span style="color:#f00;">' + $(this).val() + '</span>');
        });
        $('button').text('Remove event');
        toggleEvent = true;
    }

})