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 
<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 回答
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 回答