jQuery插件(气泡弹出):如何使它不污染我的文档主体与不可移动的垃圾

grumble.js, jQuery plugin (Bubble popups): how to make it not polute my document body with unremovable trash?

本文关键字：文档 我的 污染 主体 可移动 何使它 气泡 插件 jQuery      更新时间：2023-09-26

我想显示一个弹出许多点击。我希望这么多的人都在泡沫里。所以我在这里做了一个演示。但是我使用的Bubble生成器插件在每次显示弹出窗口时都会在DOM中保留大量垃圾。所以我尝试通过

来销毁垃圾
        $('.grumble-text').remove();
        $('.grumble').remove();
        $('.grumble-button').remove();

但它以某种方式刹车它=(所以如何改变嘟囔气泡弹出插件代码，使其要么保持DOM干净或至少使插件独立于垃圾它创建?

我最近更新了插件，以提供更好的控制定位和角度。这个更新也使抱怨持续存在，在一个元素上多次调用插件将不会创建额外的剩余DOM。

尝试更新到最新的代码。下面的代码现在应该可以正常工作了。

var html = ''
    +'<a href="#me" target="_blank">Download me</a>'
    +'<br/>'
    +'<a href="#edit">Edit me</a>'
    +'<br/>'
    +'<a href="#delete">Delete me</a>';
var $grumble = $('#grumble3');
$grumble.mouseup(function(eventObj) {
    $grumble.grumble({
        text: html ,
        angle: (Math.random() * 360 + 150),
        distance: 30,
        hideOnClick: true,
        onShow: function() {
            $grumble.addClass("hilight");
        },
        onBeginHide: function() {
            $grumble.removeClass("hilight");
        }
    });
}).mousedown(function() {
    $grumble.addClass("hilight");
});

谢谢你的兴趣。如果有任何进一步的问题，请在github页面上以bug的形式提出。https://github.com/jamescryer/grumble.js

在onHide回调中使用grumble和button参数，如下所示:

$('#grumble').grumble({
    text: 'Whoaaa, this is a lot of text that i couldn''t predict',
    angle: 85,
    distance: 50,
    showAfter: 4000,
    hideAfter: 2000,
    onHide: function(grumble, button) {
        grumble.bubble.remove();
        grumble.text.remove();
        button && button.remove();
    }
});

这允许您仅删除与特定工具提示/弹出/气泡相关的"垃圾"(我更喜欢"剩菜")。注意，button仅在hasHideButton为true时存在，因此检查button &&是否存在。

为什么要删除它?"垃圾"是否会导致浏览器性能问题?

一般来说，要做到这一点，唯一的方法是深入到插件源代码中，并添加一个函数来删除插件，如果插件不存在的话。如果您只是删除相关的DOM元素，您将留下对它们的引用和访问它们的事件处理程序。

相关文章：