当 div 中的 inner html 改变时触发事件

Question

我有一个div用来存储一些信息，通过点击按钮将这些信息填充到.innerHTML中。我的目标是，当这个div中的文本被添加后，我想使用jQuery的.slideDown来展示这个div。这是否可行？

例子：

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

添加文本 -

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

我希望在这个之后使用这个功能 :)

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

我正在尝试使用 .change() 函数，但它仅适用于 input 和 textarea 元素。非常感谢您的答案！

Ondrej

- s0vet

---

如果检查内容更改不起作用，您是否可以将此代码绑定到按钮的单击功能上？ - Dolchio

不行，因为这个div包含了关于网页上的计算信息，有时候会有，有时候没有。 - s0vet

我现在正在使用.setInterval()，但这不是一个好的解决方案。 - s0vet

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

- Khanh TO

---

嘿，太酷了 :) 我以前不知道如何更改jQuery函数。非常感谢你！！！ - s0vet