Fire event when inner html in div changed

Question

I have div for some informations, which are filled into with .innerHTML by clicking on the button. The goal is I want to .slideDown the div when the text in div is added. Is it possible to do it with jQuery ?

Example:

<div id="calcInfo"></div>

Adding text into div -

document.getElementById("calcInfo").innerHTML = 'someText';

I want to use this function after it :)

if ($('#calcInfo').text().trim().length > 0) {
   $('#calcInfo').slideDown('slow', function() {});
};

I was trying .change() function, but it only works for input and textarea elements. Many thanks for answer !

Ondrej

Answer 1

You can do it by extending the $.html function. Like this:

(function($)
{
    var oldHtml = $.fn.html;
    $.fn.html = function()
    {
        var ret = oldHtml.apply(this, arguments);

        //trigger your event.
        this.trigger("change");

        return ret;
    };
})(jQuery);

Attach event handler:

$("#calcInfo").on("change",function(){
     if ($(this).text().trim().length > 0) {
        $(this).slideDown('slow', function() {});
     };
});

When you need to change your html. Do it like this:

$("#calcInfo").html('someText');