Override Jquery Method

by jacobwsmith

HTML

<h2>Override a jQuery Remove Method</h2>
<p>
    <a>Remove Me 1</a>
    <a>Remove Me 2</a>
    <a>Remove Me 3</a>
</p>

<h2>Override a jQuery Change Method</h2>
<p>
    <input type="text"/>
</p>

CSS

a {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

JavaScript

(function () {
    
    // THIS WORKS GREAT!
    // Store a reference to the original remove method.
    var originalRemoveMethod = jQuery.fn.remove;
    // Define overriding method.
    jQuery.fn.remove = function () {
        // Log the fact that we are calling our override.
        //console.log("Override method");
        alert('removing');
        // Execute the original method.
        originalRemoveMethod.apply(this, arguments);
    }
    
    // THIS IS NOW WORKING
    // Store a reference to the original remove method.
    var originalChangeMethod = jQuery.fn.change;
    jQuery.fn.change = function () {
        alert('extending change');
        originalChangeMethod.apply(this, arguments);
    }
    
    // TODO: Try ON and filter change mabye??
    
})();


// When DOM is ready, initialize.
$(function () {

    // Remove
    $("a").click(function () {
        // Remove the target link.
        $(this).remove();
        // Cancel default event.
        return (false);
    });
    
    // Change
    $('input').change(function(){
        alert('change');
    });

});