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

Could you not bind this code to the button's click function if checking for content change isn't working? — Dolchio, Jul 28 '13 at 12:06
No, because this div contains infos about calculation on the web and sometimes contains it and sometimes no. — s0vet, Jul 28 '13 at 12:09
I am using `.setInterval()` for now, but this is not good solution. — s0vet, Jul 28 '13 at 12:10

score 11 · Accepted Answer · answered Jul 28 '13 at 12:12

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');

Hey, it's super cool :) I didn't know anything about changing jQuery functions. Thanks you very much ! ! ! — s0vet, Jul 28 '13 at 12:28

Fire event when inner html in div changed

1 Answers1

Linked