#id селектор не работает в jQuery

Question

Это, вероятно, тривиальность, но я не могу сделать эту простую работу кода. Биты интереса приводятся ниже.

<script> 
    $("#link1").click(function(){ 
     $("#content").fadeOut(200); 
    }); 
</script> 

[....] 

<nav> 
    <a class="navLink" id="link1">Link1</a> 
    <a class="navLink" id="link2">Link2</a> 
    <a class="navLink" id="link3">Link3</a> 
    <a class="navLink" id="link4">Link4</a> 
</nav>     

<div id="container">  
    <div id ="content">    
     <p>This is a paragraph.</p> 
    </div>   
</div> 

Идея состоит в том, чтобы удалить содержимое «div» div при нажатии на Link1. Но этого просто не бывает. Интересно, что если я заменил скрипт, как показано ниже, и добавит триггер события onclick в Link1, тогда он будет работать.

<script> 
    function disappear(){ 
     $("#content").fadeOut(200); 
    } 
</script> 

Это говорит о том, что селектор #id действительно работает (по крайней мере, для «содержания»). Кто-нибудь видит, где проблема в моем коде?

Спасибо заранее, Этторе

Answer 1

Ваш скрипт появляется перед элементом он требует (#link1), поэтому он не может найти его еще.

Вы либо должны двигаться дальше сценарий вниз страницы, или обернуть его в $(function() {...})