シンプルなJQueryのクリック＆ショーが動作しない

Question

私はこの単純なJQueryビットを使用して、リンクをクリックしてdivを表示/非表示にしています。以前は同じコードを数回使用していましたが、しかし今、突然それは仕事を拒否します。

JQueryが正しく組み込まれているため、このページでJavascriptエラー（またはそれ以外のエラーが発生していない）は表示されません。

はJQuery：

<script type="text/javascript"> 
    $(function() { 
     $('#addnew').css('display', 'none'); 
     $('#shownew').click(function() { 
      $('#addnew').toggle(); 
      return false; 
     });   
    }); 
</script> 

HTML（リンク）：

<a href='#' id='shownew'>Add News Item</a> 

HTML（DIV）：

<div id="addnew"> 
<form id="new_news" enctype="multipart/form-data" action="news.php" method="post"> 
Title: 
<br/><input type="text" name="title" id="title" /> 
<p>Image (optional, will be shown after first paragraph) 
<br/><input type="hidden" name="size" value="2000000"><input type="file" name="photo"> 
<p>Article body: 
<br/><textarea cols='40' rows='5' maxlength='5000' name='body' id='body'></textarea> 
<p><input type="submit" name="submit" id="submit" value="Submit" /> 
</form> 
</div> 

私はおそらくここで何を失われるだろうか？ JQueryからわかるように、divは最初から隠されています。 $('#addnew').css('display', 'none');と表示されている行を削除すると、divは正しく表示されますが、リンクでは表示と非表示が切り替わりません。

Answer 1

オンロード前に#showNew要素がDOMに存在しますか？そうでなければ、コードは機能しません。そのような場合は、次のコードを参考にしてください。

$(document).on('click', '#shownew',function() { 
     $('#addnew').toggle(); 
     return false; 
    }); 

Answer 2

私は数分後にページをリロードして機能しました。何が間違っていたか分かりません。私はコードが最初から良かったことを知っています。