ajax部分がjsfiddle等で反映できないので、少し言葉でも補足させて頂きますが
申し訳ございません。
- 下記の<!--original-->のhtmlが存在し、.toggleが設定されているため、.first内の各trは初期では表示されていません
- ここで.btnをクリックした場合、Jqueryにより.show()され、displayのnoneが打ち消されます(ここでなぜか、display:table-rowが設定されます)
- その後2)の状態のまま、ajaxにより、.insertに<!--ajaxで追加-->の要素が追加
- そして、<!--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で追加した要素には適用されないのかという原因と解決方法について
アドバイスを頂けますでしょうか。
宜しくお願い申し上げます。
html
1<!--original--> 2<table class="first"> 3 <tbody> 4 <tr class="toggle"><td>A</td></tr> 5 <tr class="toggle"><td>B</td></tr> 6 <tr class="toggle"><td>C</td></tr> 7 </tbody> 8</table> 9 10<div class="insert"></div> 11<button class="btn">push</button>
html
1<!--ajaxで追加--> 2<table class="second"> 3 <tbody> 4 <tr class="toggle"><td>D</td></tr> 5 <tr class="toggle"><td>E</td></tr> 6 <tr class="toggle"><td>F</td></tr> 7 </tbody> 8</table>
css
1.toggle{ 2 display:none; 3}
javascript
1$(function(){ 2 $('.btn').on('click',function(){ 3 $('.toggle').show(); 4 }) 5})
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/22 01:06
2018/08/22 02:31