0

div の onclick イベントで何かを警告したい。

これは私のコードです:

<script type="text/javascript">
document.getElementById('new_div').click(function() {
    alert(1);

});

</script>

<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>

ただし、ページをロードすると、エラーが表示されます。

document.getElementById("new_div") is null

私のコードの問題は何ですか?

4

6 に答える 6

3

編集：これはより良い解決策になるはずです、私はJavaScriptで少し錆びています。

ページが読み込まれた後、JavaScriptイベントハンドラーを読み込む必要があります。最も簡単な方法は、ドキュメントの読み込みが終了し、ウィンドウがonload-eventをキャストしたときにコードを読み込むことです。

<script type="JavaScript">
window.onload = function(){
    document.getElementById('new_div').onclick = function() {
        alert("Good morning, you are very beautiful today!");
    }
}
</script>
于 2012-04-23T09:33:47.757 に答える
1

JavaScriptコードの後に​​そのdivを定義したため、ハンドラーを追加すると、divはまだ存在しません

コードを逆にします

<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>


<script type="text/javascript">
   console.log(document.getElementById('new_div'))
</script>

イベントを正しくアタッチするには、addEventListener (およびIE<9の場合はattachEventdocument.getElementById('new_div').onclick = ... ) を使用するか、単純に使用します(ただし、以前に定義されたハンドラーがあれば削除するため、お勧めしません)。

于 2012-04-23T09:28:23.137 に答える
0

javascriptの実行時に、new_divはまだロードされていません。

次のようなものを試してください。

$(document).ready(function()
{
    $('#new_div').click(function()
    {
        alert(1);
    }); 
});

編集

使用しているのでjQueryを使用していると思います.click(function() {

于 2012-04-23T09:32:47.150 に答える
0

これを試して

          <html>
       <head>

    <script type="text/javascript">
    $(document).ready(function(){
      $("#new_div").click(function(){
        alert(1);
      });
    });
    </script>
    </head>

   <body>
    <div id="new_div" style="border:1px solid;">
    Clicked Me......
       </div>
     </body>
    </html>
于 2012-04-23T10:00:14.480 に答える
0 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

  <script type="text/javascript">
   function clicked(item) {
    alert($(item).attr("id"));
   }
  </script>


  <div onclick="clicked(this);" id="test">test</div>
于 2012-04-23T09:34:50.187 に答える
0

jquery は問題を美しく解決すると思います。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
    alert(1);
    });
});
</script>

あなたのHTMLは同じままです

于 2012-04-23T09:36:44.647 に答える