replaceWithで追加された要素にJqueryの効果がありません

replaceWithを使用して複数のページに共通のナビゲーションバーを追加しています。replaceWithで追加された要素にJqueryの効果がありません

replaceWith（）の後に、li要素の1つに「アクティブ」クラスを追加してリンクをアクティブに見せたいと思います。

コードは実行時に影響しません。しかし、後でChromeスニペットで$（ "＃link1"）。addClass（ "active"）を実行すると、期待通りに機能します。

<body> 
<div id='nav-placeholder'></div> 

<script> 
     $.get("static/html/navbar.html", function(data){ 
      $("#nav-placeholder").replaceWith(data); 
     }); 
     //There is an <li> element in navbar.html with id="link1" 
     $("#link1").addClass("active"); 
</script> 
</body>

出典

2017-01-19 Matthew C

試し '$（ドキュメント）.ready（関数（）{...あなたのコードを... }）; ' –

いいえ、効果はありません。 addClass（）の前と後にconsole.log（）を追加し、両方が表示されたがリンクには何の影響も与えなかった。 –

'$ .get（）'は**非同期**操作です。コールバック内のコードは、HTTP要求が完了すると実行されます。 '$ .get（）'の直後のコードは、そのコールバックが呼び出される前に直ちに実行されます。 – Pointy

<div id='nav-placeholder'></div> 

<script> 
     $.get("static/html/navbar.html", function(data){ 
      $("#nav-placeholder").replaceWith(data); 
      $("#link1").addClass("active"); 
     });   
</script>

出典

2017-01-19 01:38:38

ありがとう、これは@Pointyがコメントで提案した解決策です –

このようなchaining the jQuery methods試してみてください：

<body> 
<div id='nav-placeholder'></div> 

<script> 
     $.get("static/html/navbar.html", function(data){ 
      $("#nav-placeholder").replaceWith(data).find("#link1").addClass("active"); 
     }); 
</script> 
</body>

出典

2017-01-19 01:31:16

連鎖を使用したリンクにはまだ効果がありません –

これは、対象となる要素（nav-placeholder）が置き換えられるため、問題が発生します。 – Pointy

replaceWithで追加された要素にJqueryの効果がありません

答えて

関連する問題