重新启动 jquery 的 setInterval 而不重新初始化它

Question

正如我的标题所暗示的，我想重新启动jquery的setInterval而不重新初始化它。

我的场景是考虑一个完全加载的页面。在这个页面上，div在页面完全加载后的任何时候都是动态和随机添加的。我没有从我的代码后面添加这个div，所以我对此没有任何控制。这个div有一个类即lpInviteChatHrefClose。这是固定的，即div将始终有这个类。当用户单击这个div时，执行一些javascript函数并隐藏这个div。也可以添加多个div标签(具有相同的类名)，但如果没有单击现有的可见div标签，则不会添加新的div。

现在，我想要实现的是，我想在点击这个div时调用javascript函数。现在，由于这个div是动态添加的，我不能写下面的代码，因为jquery将无法在document.ready

上找到div。

$('.lpInviteChatHrefClose').click(function(){...});

所以我所做的是我创建了一个setInterval，检查是否存在这样的div，如果是，然后绑定点击事件。当第一次添加动态div时，我能够做到这一点。

当第二次将这个动态div添加到html中时，我的问题出现了。这里我再次需要处理新的动态添加的div的点击事件。

到目前为止，我所做的如下

外部文档。准备好(全球)

 var interval;
 var onInterval;

内部document.ready

onInterval = function () {
    //check if an element with this class exists
    if ($('.lpInviteChatHrefClose').length) {
        $(".lpInviteChatHrefClose").click(function () {
            outbound_reject_omniture_setting(this);
            //This should restart the interval but it doesnt
            interval = setInterval(onInterval, 1000);
        });
        clearInterval(interval);
    }
};
interval = setInterval(onInterval, 1000);

我本来可以取消这个检查if ($('.lpInviteChatHrefClose').length)，但是一旦动态div出现，setInterval将在每1秒之后附加一个函数。我不想这样。我希望我的javascript函数只被调用一次。

clearInterval(interval);将停止/暂停间隔。但是我不知道如何重启它

请帮忙!

很抱歉描述太长了。提前感谢!

Answer 1

您需要使用委托事件处理程序将事件附加到DOMready触发后创建的元素上。忘记任何与setTimeout或setInterval有关的事情。

$(document).on('click', '.lpInviteChatHrefClose', function(){
    // your code here...
});

Answer 2

动态元素不必使用setInterval。为

使用事件委托

$(document).on('click','.lpInviteChatHrefClose',function(){...});

Answer 3

我能够做到这一点。

问题是setInterval正在重新启动(您可以说是观察错误)，但它立即绑定到动态创建的早期元素，因此在特定时间段后添加的新元素没有被绑定。

也正如我提到的，被调用的方法即outbound_reject_omniture_setting正在做一些工作，然后元素被隐藏，所以我无法检查点击是否被绑定到相同的元素。

解决方案是动态遍历所有添加到现在的元素，并检查其中是否有1个是visible。如果是，则将click事件绑定到元素并清除间隔。在点击功能内，重新启动间隔

onInterval = function () {
    $('.lpInviteChatHrefClose').each(function (index) {
        if ($(this).css('visibility') == 'visible') {
            $(this).click(function () {
                outbound_reject_omniture_setting(this);
                interval = setInterval(onInterval, 1000);
            });
            clearInterval(interval);
        }
    })
};
interval = setInterval(onInterval, 1000);

谢谢大家的帮助。