javascript - jQuery 的显示/隐藏不适用于未附加到 DOM 的元素(3.0 中发现的重大更改)

Question

我正在努力将大型应用程序从相当古老的 1.11.2 升级到最新的 jQuery 3.0。我发现非常微妙的变化破坏了我们的一些功能:

当我们实例化一些复杂的小部件时，我们最初使用 css 隐藏一些元素(不显示)。然后我们使用 show/hide 来显示该元素。

但是对显示/隐藏的调用可能会在小部件附加到 DOM 之前发生。当未附加元素时，显示/隐藏在 1.11.2 中可以正常工作，但在 3.0.0 中不起作用。

演示:

• 1.11.2:https://jsfiddle.net/7j9xawc2/1/

• 3.0.0:https://jsfiddle.net/vma214mL/1/

.tabCompositeSearchWidget-ClearButton
{
    /* Clear button is initially hidden */
    display: none;
}

var e = document.createElement('div');
$(e).addClass('tabCompositeSearchWidget-ClearButton');
$(e).text('blah');
$(e).show();
$('#root').append($(e));
alert($(e).is(":visible"));

在旧版本中，元素将可见，警报将显示 true，在最新版本中，元素将不可见，警报将显示 false

很难找到所有此类用法，我对解决该问题的最佳方法很感兴趣: 这里最好的解决办法是什么？手动修改 jquery.js 文件以按照旧方式运行？ (我真的不想这样做)

更新:修复一次性情况很容易。但可能有数十个这样的调用，查找并修复所有这些调用需要付出巨大的努力，而且效率不高。

Answer 1

以下是 jquery 博客中的相关部分:

“如果样式表中的元素设置为 display: none，则 .show() 方法将不再覆盖它。因此，迁移到 jQuery 3.0 的最重要规则是:不要使用样式表设置默认值 display: none，然后尝试使用 .show() – 或任何显示元素的方法，例如 .slideDown() 和 .fadeIn() – 使其可见。

如果您需要默认隐藏某个元素，最好的方法是向该元素添加一个类名，例如“hidden”，并在样式表中定义要显示的类:none。然后，您可以使用 jQuery 的 .addClass() 和 .removeClass() 方法添加或删除该类来控制可见性。或者，您可以让 .ready() 处理程序在元素显示在页面上之前对元素调用 .hide()。或者，如果您确实必须保留样式表默认值，则可以使用 .css("display", "block") (或适当的显示值)来覆盖样式表。"

https://blog.jquery.com/2015/07/13/jquery-3-0-and-jquery-compat-3-0-alpha-versions-released/