Question

我一直试图找到一种方法来检测每次特定对象的计数在DOM中发生了变化。

例如，假设类'.special'当前返回5个对象：

$('.special').css('color','1px solid red');

稍后，用户会导致.special个对象的数量增加或减少。因此，只要.special个对象的数量从5变化，我就希望触发一个事件。

这可能吗？

我尝试使用change事件，但在这种情况下无效。

非常感谢提前！

Answer 1

您可以捕获DOMNodeInserted事件。

document.addEventListener('DOMNodeInserted', function(e){
    alert($('.special').length);
});

The problem is, this event is not supported by IE8 and before.

Maybe you can find a workaround but I haven't tried

Here's a JSFiddle that works

Answer 2

根据您的情况（用户可以通过20种不同的方式减少或增加DOM中元素的数量），我只想到一件事。您应该存储当前的special元素，并且可以使用setInterval并尝试每隔2秒调用一次函数并检查specials计数并将其与之前的数字进行比较。如果它们不相等，那么就会发生变化。我不会建议这种方法，我认为最好在所有不同的方式上加上click绑定。

Answer 3

解决此问题的最简单方法是创建一个创建“.special”对象的代理方法。您需要创建事件来控制DOM中当前的元素数，例如：

function createNewSpecial() {
    var specialCnt = $('.special').length;
    if (specialCnt > 5) {
        // magic
    }

    // creation of another ".special" element in DOM if needed
}

Answer 4

最佳解决方案是定义一个函数，该函数执行您希望在添加列时发生的操作，例如：

function on_add_column() {
  // do stuff
}

现在将此函数绑定到导致添加列的所有事件，例如click s，ajax或您拥有的内容。

$("button#add").on("click", on_add_column)
$("a#add-link").on("click", on_add_column)
$("input#beh").on("change", on_add_column)

使用超时意味着让jQuery在设定的时间间隔内查询DOM ...这效率不高。此外，您应该知道将导致在您自己的应用程序中添加列的所有操作。

Answer 5

好的，这确实涉及一些代码，但自定义事件可能有效。在这里，我有一个自定义的“specialEvent”，以及一个“trackChanges”功能来完成你的工作。

我在小提琴中创建了一个“跟踪器”功能，根据这里更改的内容添加一个类：http://jsfiddle.net/DsSQd/1/并跟踪之前在“跟踪器”元素中看到的长度 - 在这种情况下是父级群组。这有点难看，但你可以做你想要的，在我的，我跟踪父包装中组的长度，只需根据长度是否改变添加一个类，如果没有，只需突出显示触发事件的元素。

// custom event handler
$(document).on('specialEvent', '.special, .changerthing, .friendly>.specialalso', function () {
    trackChanges(this, $(this).parent(), $(this).parent());//react to the change
});
// event where I trigger the handler
$('#wrapperToBindTo').on('click wacked', '.changers,.special,.changerthing', function () {
    $(this).trigger('specialEvent');
});
// event where I trigger the handler
$('.friendly').on('click', '.specialalso', function () {
    var me = $(this);
    me.clone().appendTo($(this).parent()).text(me.text() + ' Copy of:' + me.index()); //add one
    me.parent().find('.specialalso:last').trigger('specialEvent'); //fire special event
});

例如，我们可以添加此功能：

//added to show a remove, then trigger that cascades
$('#wackFriendly').click(function(){
    $('.friendly>.specialalso').last().remove();
    $('.friendly>.specialalso').last().trigger('wacked');
});

然后处理如下所示：http://jsfiddle.net/DsSQd/2/

onChange对象事件的数量

5 个答案: