proof of undelegation when moving an object

by Gerald Gillespie

HTML

<div class="touch">the class of this div is: <span id="classval" style="font-weight : bold"></span><br/>

    <p>a clickable item in the div (or could be body). it <span>has</span> a handler on it. <span id="proof">step 1: click on this to prove it.<span></p>
</div>
<input type="button" id="changeClass" value="step 2: click to change the class to 'notouch'" />
<input type="button" id="removeHandler" value="step 4: click to remove the handler" />

JavaScript

function checkClass() {
    $('#classval').text($('div').attr('class'));
}

// putting a handler where we want
$('.touch').on('click', 'p', function () {
    alert('this has a handler on it');
//

}); // end on click


$('#changeClass').on('click', function () {
    // changing the class -- DOES NOT REMOVE THE EXISTING HANDLER
    $('.touch').removeClass('touch').addClass('notouch');
    
    // fun stuff
    $(this).attr('disabled','disabled');
    checkClass();
    $('#proof').text('step3: click again to prove it').css('font-weight','bold');
    alert('the class has changed, but there is still a handler on its p members!')

});

$('#removeHandler').on('click', function(){
    $('div').off('click', 'p'); // remove the handler
    
    // some fun stuff
    $(this).attr('disabled','disabled').val('handlers removed');
    $('p').find('span').text('does not have').css('font-weigth','bold');
    $('#proof').remove();
    alert('handlers removed');
});

checkClass();