javascript - div 中的内部 html 更改时触发事件

Question

我有div一些信息，.innerHTML通过单击按钮填写。目标是添加 div 中的文本时我想要.slideDowndiv 。可以用 jQuery 来做吗？

例子：

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

将文本添加到 div -

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

我想在它之后使用这个功能:)

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

我正在尝试.change()功能，但它只适用于input和textarea元素。非常感谢您的回答！

翁德雷

Answer 1

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

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

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

        return ret;
    };
})(jQuery);

附加事件处理程序：

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

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

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