grumble.js，jQuery 插件（气泡弹出窗口）：如何使其不被不可移动的垃圾污染我的文档正文？

Question

我想在点击时显示一个弹出窗口。我希望很多人都处于泡沫之中。所以我创建了一个演示：此处。但是我使用的 气泡生成器插件 每次显示时都会在 DOM 中保留大量垃圾弹出窗口。好吧，所以我试图通过销毁垃圾

        $('.grumble-text').remove();
        $('.grumble').remove();
        $('.grumble-button').remove();

，但它以某种方式完全阻止了它=( 那么如何更改 grumble-bubble弹出插件代码以使其保持 DOM 干净或至少使插件独立于它创建的垃圾？

Answer 1

为什么要删除它？ “垃圾”是否会导致浏览器性能出现问题？

一般来说，执行此操作的唯一方法是深入研究插件源并添加一个功能来删除插件（如果尚不存在）。如果您只是删除相关的 DOM 元素，您将留下对它们的引用以及访问它们的事件处理程序。

Answer 2

在 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();
    }
});

这允许您仅删除“垃圾”（我更喜欢“剩菜”） ）与特定的工具提示/弹出窗口/气泡关联。请注意，仅当 hasHideButton 为 true 时，button 才存在，因此要进行 button && 存在检查。

Answer 3

我最近更新了该插件，以提供更好的定位和角度控制。更新还保留了抱怨，在一个元素上多次调用插件不会创建额外的剩余 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 页面上将其作为错误提出。 https://github.com/jamescryer/grumble.js