2017-01-19 3 views
0

Я использую replaceWith, чтобы добавить общую панель навигации на несколько страниц.JQuery не влияет на элемент, добавленный с заменойWith

После заменыWith() Я хочу добавить «активный» класс в один из элементов li, чтобы ссылка выглядела активной.

Код не влияет на время выполнения. Но когда я запускаю $ («# link1»). AddClass («active») впоследствии в Chrome Snippets работает так, как ожидалось.

<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> 
+0

попробовать '$ (документ) .ready (функция() {... код ... }); ' –

+0

Нет, не имеет никакого эффекта. Я добавил console.log() до и после addClass(), и оба были напечатаны, но не влияют на ссылку. –

+0

'$ .get()' является ** асинхронной ** операцией. Код в обратном вызове выполняется, когда HTTP-запрос завершается. Код сразу после '$ .get()' выполняется немедленно, до того, как будет вызван обратный вызов. – Pointy

ответ

1

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

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

+0

Спасибо, это решение, как @Pointy, предложенное в комментариях –

0

Попробуйте 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> 
+0

По-прежнему не влияет на связь с цепочкой –

+0

У этого будут проблемы, потому что заменяемый объект (nav-placeholder) заменяется. – Pointy

Смежные вопросы