jQueryの表示/非表示は、DOMに接続されていない要素では機能しません（3.0で見つかった変更点）

Question

私は大きな古典的な1.11.2から最新のjQuery 3.0にアップグレードしています。

いくつかの複雑なウィジェットをインスタンス化すると、最初はcss（display none）を使っていくつかの要素を隠すようになりました。次に、show/hideを使用して要素を表示します。

しかし、ウィジェットがDOMにアタッチされる前に、show/hideの呼び出しが行われる可能性があります。要素がアタッチされていないのに1.11.2でうまく動作するのに使用されていましたが、3.0.0では機能しません。

デモ：

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

• 3.0.0：古いバージョン要素で

  .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")); 
  

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

が見えると警告されますと表示されますは、最新では表示されませんと警告はこのような用途のすべてを見つけるのは難しいですし、私がいることを定着させる最良の方法に興味を持っています false

を言うだろう：何がここで最高の修正をすることができ ？古い方法でjquery.jsファイルを手動で変更するには？ （私は本当にそれをしたくない）

更新：固定ワンオフケースは簡単です。しかし、潜在的にそのような呼び出しの数十を持っており、それらのすべてを修正する&が巨大な努力を必要とし、効果的でないことを見つける。ここで

Answer 1

はjqueryのブログから関連セクションです：

「あなたが表示するように設定されているスタイルシート内の要素を持っている場合は、次のどれも、.SHOW（）メソッドは、もはやそれを無効にしません最も重要なルールだから。 .show（）や.slideDown（）、.fadeIn（）などの要素を表示するメソッドを使用しようとすると、スタイルシートを使用してdisplay：noneのデフォルト値を設定しないでください。

要素をデフォルトで非表示にする必要がある場合は、要素に "hidden"のようなクラス名を追加し、そのクラスをdisplay：noneにスタイルシートで定義することをお勧めします。その後、jQueを使用してそのクラスを追加または削除できますryの.addClass（）および.removeClass（）メソッドを使用して可視性を制御します。あるいは、ページ上に表示される前に要素の.hide（）を呼び出すことができます。あなたは本当にスタイルシートのデフォルトを保持しなければならない場合は、あなたはスタイルシートを上書きするの.css（「表示」、「ブロック」）（または適切な表示値）を使用することができます。」

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'）;