jQuery 的 show/hide 不适用于未附加到 DOM 的元素（在 3.0 中发现重大更改）

Question

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

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

但是可以在小部件附加到 DOM 之前调用 show/hide。 Show/hide 以前在 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 博客的相关部分：

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

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

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

Answer 2

尝试用 $('div') 代替 var e = document.createElement('div');

jQuery 的 show/hide 不适用于未附加到 DOM 的元素（在 3.0 中发现重大更改）

jQuery's show/hide won't work with elements not attached to DOM (breaking change found in 3.0)

javascript

jquery

css

jquery-3