Question

有没有办法观察我的HTML身体？

我有一个css类： .abdala 和这个脚本：

<script type="text/javascript">
    $(document).ready(function () {
        $(".abdala").each(function (e) {
            alert("Abdala css class found");
        });
    });
</script>

我需要观察html的身体变化。

如果我这样做：

$(document.body).append("<div class=\"abdala\">another abadala element</div>");

追加后我需要做点什么。有没有办法做到这一点？

Answer 1

另一个问题回答了这个问题

How to detect new element creation in jQuery?

看起来它有一个插件，但它看起来非常糟糕，因为它不是jQuery原生的。它可能真正影响性能，因为浏览器必须使用更多资源来继续检查元素更改。

AngularJS非常适合这种操作，但jQuery不是。

Answer 2

没有听众可以执行此操作，但您可以创建setInterval并定期检查：

var oldBody = $('body').html();
function check() {
    if (oldBody != $('body').html()) {
        alert('Body html changed');
        oldBody = $('body').html();
    }
}

setInterval(check, 10); // checks every 10 milliseconds

Answer 3

我相信这stackoverflow answer就是你要找的。

但是，我不推荐它。

如果你在追加后还需要做其他事情，那就去做吧。

$(document.body).append("<div class=\"abdala\">another abadala element</div>");

callNextFunctionHere();

为什么比这更麻烦？

Answer 4

如果您知道元素的类/ id并且在更改时具有控制权，则可以在更新后简单地订阅“更改”事件。

<强> HTML

<span class="abcd"> something</span>
<div id="log"></div>
<button id="change">change</button>

<强>的JavaScript

(function () {
    // basic helper to log when changes happen
    var log = function (message) {
        $("#log").append(message);
    };

    // the event that triggers the change
    $('#change').on('click', function (e) {
        $('.abcd').append('...more').trigger('change');
    });

    // the event that riggers the change
    $('.abcd').on('change', function (e) {
        log(new Date().toJSON() + ": this has changed</br>");
    });

})();

<强>的jsfiddle http://jsfiddle.net/anAgent/xyzDL/1/

用jquery观察html主体

4 个答案: