Javascript 一旦更改对象数事件

我一直在试图找到一种方法，每当DOM中某个特定对象的计数发生变化时，都可以进行检测

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

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

稍后，用户会导致要增加或减少的

.special

对象的数量。因此，只要

.special

对象的数量从5变为5，我希望触发一个事件

这可能吗

我尝试为此使用

change

事件，但在本例中无效

---

非常感谢

根据您的情况（用户可以通过20种不同的方式减少或增加DOM中的元素数量），我只想到一件事。您应该存储当前的

special

元素，并可以使用

setInterval

尝试每2秒调用一个函数，检查

specials

计数并将其与上一个数字进行比较。如果它们不相等，那么就有变化。我不建议使用这种方法，我认为最好在所有不同的方法上都使用

单击
绑定。
根据您的情况（有20种不同的方法用户可以减少或增加DOM中的元素数量），我只想到一件事。您应该存储当前的
special
元素，并可以使用
setInterval
尝试每2秒调用一个函数，检查
specials
计数并将其与上一个数字进行比较。如果它们不相等，那么就有变化。我不建议使用这种方法，我认为最好在所有不同的方法上使用
单击
绑定。
解决此问题的最简单方法是创建一个代理方法来创建“.special”对象。您需要创建事件来控制DOM中当前的元素数，例如：

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

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

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

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

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

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

function on_add_column() {
  // do stuff
}

现在，将此函数绑定到导致添加列的所有事件，如
单击
s、
ajax
s或您所拥有的其他事件

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

使用超时意味着让jQuery在设置的时间间隔内查询DOM。。。这是没有效率的。此外，您应该知道在您自己的应用程序中会导致添加列的所有操作。
最好的解决方案是定义一个函数来执行您希望在添加列时执行的操作，例如：

function on_add_column() {
  // do stuff
}

现在，将此函数绑定到导致添加列的所有事件，如
单击
s、
ajax
s或您所拥有的其他事件

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

使用超时意味着让jQuery在设置的时间间隔内查询DOM。。。这是没有效率的。另外，您应该知道所有会导致在您自己的应用程序中添加列的操作。
您可以捕获DomainNodeInserted事件

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



.
您可以捕获域节点插入事件

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



.
好的，这确实涉及一些代码，但自定义事件可能会起作用。在这里，我有一个自定义的“specialEvent”可以启动，还有一个“trackChanges”函数可以执行您想要的操作

我在一个fiddle中创建了一个“tracker”函数，它只是根据此处的更改添加了一个类：并跟踪以前在“tracker”元素中看到的长度——在本例中是组的父元素。这有点难看，但是你可以做你想做的事情。在我的文章中，我在父包装中跟踪组的长度，并根据长度是否更改简单地添加一个类，如果不更改，只需突出显示触发事件的元素

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

然后像这里看到的那样处理：
好的，这确实涉及一些代码，但是定制事件可能会起作用。在这里，我有一个自定义的“specialEvent”可以启动，还有一个“trackChanges”函数可以执行您想要的操作

我在一个fiddle中创建了一个“tracker”函数，它只是根据此处的更改添加了一个类：并跟踪以前在“tracker”元素中看到的长度——在本例中是组的父元素。这有点难看，但是你可以做你想做的事情。在我的文章中，我在父包装中跟踪组的长度，并根据长度是否更改简单地添加一个类，如果不更改，只需突出显示触发事件的元素

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

然后如图所示处理：
用户如何减少或增加？当用户试图增加或减少此元素时放置事件如何添加其他元素<代码>单击
事件？@MIIB是的，但是如果用户有20种不同的方法可以减少或增加DOM中的元素计数，该怎么办？我试图找到一种更简单的方法来做到这一点，以避免重复的代码。你能提供html吗？@Dom，是的，将
单击
事件绑定到各种不同的元素。用户如何减少或增加？当用户试图增加或减少此元素时放置事件如何添加其他元素<代码>单击
事件？@MIIB是的，但是如果用户有20种不同的方法可以减少或增加DOM中的元素计数，该怎么办？我试图找到一种更简单的方法来做到这一点，以避免重复代码。你能提供html吗？@Dom，是的，将
单击
事件绑定到各种不同的元素。他提到有20种不同的方法来增加或减少特殊对象。这就是他提到的问题，有20种不同的方法来增加或减少特殊对象。这就是问题所在