jquery - 使用 JQuery 删除导致 "Undefined"错误

Question

我在我正在开发的网站上添加了一个名为scrollpaper 的插件。该插件用于静态页面和我 append 到网站的 html 片段。

问题是，当删除调用该函数的 append 片段时，使用:

$(this).remove();

我收到以下与滚动纸插件相关的错误:

TypeError: 'undefined' is not an object (evaluating 'data.clearer')

删除片段后就会发生错误。它不会导致任何实际的性能问题，并且当我重新 append 代码片段时，插件仍然可以成功调用和执行，但错误确实会堆积起来，我非常想修复它们。

主插件文件包含在每个页面的底部，并对其下方添加的静态页面进行调用:

<script src="js/jquery.scrollbarpaper.js"></script>
<script type="text/javascript">
$(function() {
    $('.scrollpaper-trigger').scrollbarPaper();
});
</script>

第二个调用被添加到 append 的 html 中:

<script>
$(function() {
    $('.scrollpaper-trigger-lightbox').scrollbarPaper();
});
</script>

如何重现问题:

1. 打开网络检查器/fire bug
2. 启动完整菜单、派对菜单、套餐或在线预订表格
3. 可以通过点击覆盖/关闭按钮关闭打开的元素，也可以在菜单页面底部的菜单之间切换。
4. 这将触发错误

为了自己解决问题，到目前为止，我只尝试将基本插件文件添加到 append 元素(并忽略静态页面)，我还尝试使用 .html('')和.empty('')。代替 .remove()，但这没有帮助。

我使用 JQuery 才几个月，所以虽然我已经熟悉了它的工作原理，但我也热衷于学习最佳实践。然而，这个问题目前超出了我的能力范围，因此我们将非常感谢任何和所有的帮助。

菜单翻转脚本:

$('.other-menus a').click(function() {
var url = $(this).attr('data-url'); 

$('.switch').fadeOut(500,
function() {
$(this).detach();
$('<div></div>').load(url).fadeIn(800).appendTo('.switch-wrap');

})

});

Answer 1

您正在使用 .remove 从 DOM 中删除元素，但这将清除所有 .data 项，包括存储在 "scrollPaper 中的对象“ 键。 Scrollpaper 插件正在访问从 .data("scrollPaper") 检索到的对象的属性，因此当它开始返回 undefined 时，它会抛出异常。

您需要在 scripts.js 中代替 .detach:

$(this).detach(); //Removes Element From DOM