動的変更後のcssがajaxで追加した要素に適用されない

Question

ajax部分がjsfiddle等で反映できないので、少し言葉でも補足させて頂きますが
申し訳ございません。

JSFiddle

1. 下記の<!--original-->のhtmlが存在し、.toggleが設定されているため、.first内の各trは初期では表示されていません
2. ここで.btnをクリックした場合、Jqueryにより.show()され、displayのnoneが打ち消されます（ここでなぜか、display:table-rowが設定されます）
3. その後2)の状態のまま、ajaxにより、.insertに<!--ajaxで追加-->の要素が追加
4. そして、<!--ajaxで追加-->のtableのtrに.toggleが設定されており、その時点で.toggleのdisplayのnoneは打ち消されているため<!--ajaxで追加-->の要素も表示される

と想定したのですが、<!--ajaxで追加-->の要素は表示されません。
developer toolでみてもtrの.toggleにはdisplay:noneが適用されておりました。

また、.show()の仕様の問題化とも考えたため、以下のようにcssの書換えを行なっても
ajaxで追加後の要素に本cssは適用されませんでした。
$('.toggle').css('display','row-table')

なぜ、.btn clickで動的に変更したtoggleのcssが
ajaxで追加した要素には適用されないのかという原因と解決方法について
アドバイスを頂けますでしょうか。

宜しくお願い申し上げます。

<!--original-->
<table class="first">
  <tbody>
  <tr class="toggle"><td>A</td></tr>
  <tr class="toggle"><td>B</td></tr>
  <tr class="toggle"><td>C</td></tr>
  </tbody>
</table>

<div class="insert"></div>
<button class="btn">push</button>

<!--ajaxで追加-->
<table class="second">
  <tbody>
  <tr class="toggle"><td>D</td></tr>
  <tr class="toggle"><td>E</td></tr>
  <tr class="toggle"><td>F</td></tr>
  </tbody>
</table>

.toggle{
  display:none;
}

$(function(){
  $('.btn').on('click',function(){
    $('.toggle').show();
  })
})

Answer 1

jqueryのセレクタをクラスで指定で使っていると、「クラス」の設定そのものを書き換えているように錯覚するかもしれませんが、$('.toggle').show();この.toggleは、ただの目印にすぎません。

ボタンを押したときの処理は、

今のhtmlの中から、クラス.toggleを持っている要素を見つけて、
その要素に対してshowする（あるいは、displayをrow-tableにする）

だけです。

cssファイル自体が、

.toggle{
  display: row-table;
}

のように上書きされた状態になるわけではありません。

■　解決方法
あとから追加される.toggleの要素が、いつajaxで読み込まれるのか分かりませんので、
これが最善策かどうかは微妙ですが。

簡単な方法としては、

CSSは、見せるクラスを分けておく。

.toggle{
  display: none;
}
.toggle.show{
  display: row-table;
}

ボタン押すところは、show()（スタイルを設定）するのではなく、見せるクラスを追加する。

$(function(){
  $('.btn').on('click',function(){
    $('.toggle').addClass('show');
  })
})

あとは、ajaxであとから.toggleの要素を足す最後の部分で、

if($('.toggle.show').length > 0){
  $('.toggle:not(.show)').addClass('show');
}

見せてるクラスが付いている.toggleが他にあれば、
追加した.toggleにも.showが付くように書いておけばいいかなーと。

Comments

[SugiuraY]

mix-peach様
ご回答を賜り、誠に有難うございます。
完全に錯覚しておりました、実際にcssを書き換えてくれているわけではなく、一時的にDOMの要素を書き換えている（インラインでcssを適用している感覚に近い？）といった感じなのですね。
ご指摘の方法でそれぞれのclassを事前に作成しておくことで無事解決しました。
classをadd removeすることでcssを適用されますが、fadeIn fadeOutやanimationといったJqueryの動きをつけれなくなることは残念ですが、大変勉強になりました。
有難うございます！

[mix-peach]

cssでも、transition　とかの設定で動いているように見せることもできたと思います。
他にも、ajaxの要素がいつ読み込まれるか次第ではありますが、ボタンを押せるタイミング自体を、全てのtoggle要素を読み込んでから・・と、制御する方法でも良いかもしれません。

回答は、あくまで「質問に提示されたことを簡単に実現できる方法」の例なので、実際の仕様（やりたいこと）に沿った良い別の方法もあると思います。もし、時間があれば試行錯誤してみても良いと思いますよー。