HTML Onchange

HTML

<a id="button" href="#">Am i dirty? True or False!</a><br/><br/>
<div id="writer" class="wysiwyg" contenteditable="true">
    <div>
        <h1>2 PURPOSE AND RESPONSIBILITIES</h1>
    </div>
    <div>
        <h2>2.1 PURPOSE OF A BUILDING LOG BOOK</h2>
        <p>The Health and Safety File provides information on the building elements, its structure and services including any systems
            installed to assist in access to maintaining plant or equipment. </p>
        <p>It is expected that the Maintenance Contractor will provide their own site specific assessments based on the works that will
            be carried out at the time. </p>
        <p>There are provisions in connection with Health, Safety and Welfare, which are legal requirements. In addition, there are
            many official recommendations. For full details, reference should be made to the appropriate official publications.
        </p>
        <p>The information relating to certain Health and Safety information has been partly referenced from the HSE Website and is
            contained in freely available leaflets. </p>
        <p>IT IS VERY , VERY IMPORTANT THAT NO OTHER TYPES OF ELEMENTS ARE INSERTED WITHIN THE ANOTES.</p>
    </div>  <div id="writer" class="wysiwyg" contenteditable="true">
    <div>
        <h1>2 PURPOSE AND RESPONSIBILITIES</h1>
    </div>
    <div>
        <h2>2.1 PURPOSE OF A BUILDING LOG BOOK</h2>
        <p>The Health and Safety File provides information on the building elements, its structure and services including any systems
            installed to assist in access to maintaining plant or equipment. </p>
        <p>It is expected that the Maintenance Contractor will provide their own site specific assessments based on the works that will
            be carried out at the time. </p>
        <p>There are provisions in connection with Health, Safety and Welfare, which are legal requirements. In addition, there are
            many official recommendations. For...

CSS

.dirty {background: grey}

JavaScript

(function($) {
    $.fn.wysiwygdirty = function() {
        return this.each(function() {
            var that = $(this);
            var htmlold = that.html();
            that.bind('paste copy cut keyup mouseup', function() {
                if (that.hasClass('dirty') === false) {
                        var htmlnew = that.html();
                        if (htmlold !== htmlnew) {
                            that.addClass('dirty');
                            that.trigger('change');
                        }
                }
            }).bind('dragover drop', function(event) {
                event.preventDefault();
                return false;
            });
        });
    };
})(jQuery);


$('#writer').wysiwygdirty();

$('#writer').change(function() {
    console.log("Dirty = " + $('#writer').hasClass('dirty'));
});


$('#button').click(function() {
    alert($('#writer').hasClass('dirty'));
});