包装内容元素会导致内联脚本触发

Question

我正在编写一个 jQuery 插件。在这个插件中，我将现有的 BODY 内容包装在 DIV 中并隐藏它们。

var $originalBodyContents = $('body').wrapInner('<div>').children('div').hide();

插件然后将它自己的覆盖DIV 附加到BODY 上，这就是插件的魔力。当用户退出插件时，它会移除其覆盖层DIV，并展开它们。

$originalBodyContents.children().unwrap();

效果很好，您可以在此演示中看到：
http://jsfiddle.net/vKddB/1/

但是，如果页面上有内容脚本，那么它们都会在发生换行时重新加载并再次运行它们的代码。这会导致很多意外行为，您可以在此演示中看到：
http://jsfiddle.net/vKddB/3/

在上面的演示中，您会看到“显示警报”按钮显示“你好！”的警报。点击时。如果您触发插件并关闭插件，您会注意到“显示警报”按钮现在有两个与之关联的单击处理程序，因此在单击时会显示两个警报。

我的插件将无法控制它正在运行的页面的内容。当我将正文内容包装在 DIV 中时，有没有办法可以防止内联脚本重新运行？

Answer 1

$('script', $('body')).remove(); 在您的代码之前

Answer 2

如果您希望您的插件在任意页面上工作，您可能需要考虑另一种方法，即您的叠加层仅覆盖原始内容。我相信这会比包装和隐藏、移动/删除脚本节点等技巧更可靠。

Answer 3

我只是想分享我构建叠加层的方法，也许它会对某人有所帮助。 有点不同，div是在页面上添加的，并没有隐藏已有的div元素。可能会快一点，因为脚本不会搜索所有 div dom 元素。

第一

//create the overlay with
$('<div class="overlay" />').appendTo('body').show();

//close the overlay with
$('.overlay').remove();

//css used for overlay
.overlay
{
    background-color: #363636;
    background-image: url('a_nice_bg_image.png');
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 1000;
    opacity: .55;
    filter:alpha(opacity=55);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}

Answer 4

将 div 附加到正文，将其位置设置为绝对，设置高 z-index 并调整其大小以覆盖整个内容。

        var $overlay = $('<div>')
        .css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: $(document).width() + 'px',
            height: $(document).height() + 'px',
            backgroundColor: '#f00',
            'z-index': 10000
        })
        .appendTo('body');

像这样（您的原始代码经过最少的修改）：http://jsfiddle.net/Ya3DG/4/ :)