当div中的内部html发生更改时触发事件 [英] Fire event when inner html in div changed

问题描述

对于一些信息，我有 div ，这些信息通过单击按钮填充到 .innerHTML 中。目标是当div中的文本被添加时，我想要 .slideDown div。

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>

在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() {});
};

我在尝试 .change（）函数，但它只适用于输入和 textarea 元素。非常感谢您的回答！

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

Ondrej

推荐答案

您可以通过扩展$来实现。 html函数。像这样：

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() {});
     };
});

当您需要更改您的html时。这样做：

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

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

这篇关于当div中的内部html发生更改时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！