请问一个JS的小问题。

ymy1248227142 2015-07-24 11:07:10
代码一:
$(document).ready(function(){
$('#submit').on('click', function (e) {
alert(1)
});
});


代码二:
  $('#submit').on('click', function (e) {
alert(1)
});


这两段代码有什么区别呢,为什么第一段代码不起作用?点了按钮不弹出alert框,这个是什么原因呢,chrome环境。
...全文
147 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
豪情 2015-08-06
  • 打赏
  • 举报
回复
引用 4 楼 ymy1248227142 的回复:
[quote=引用 2 楼 kongwei521 的回复:] 一个是页面加载之后点击运行。页面没加载完,得不到button id, 一个是直接点击运行
多谢[/quote] 不用客气,方便的时候结贴。
ymy1248227142 2015-07-24
  • 打赏
  • 举报
回复
引用 2 楼 kongwei521 的回复:
一个是页面加载之后点击运行。页面没加载完,得不到button id, 一个是直接点击运行
多谢
ymy1248227142 2015-07-24
  • 打赏
  • 举报
回复
引用 1 楼 jikeytang 的回复:
查看在线演示: http://jsbin.com/xilepi/edit?html,output 可以运行的,代码是没有问题。 区别在于,dom.ready在页面加载完之后运行,与代码位置无关,下面的代码要想起作用就必须放在页面的后面。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        a{ color:#0a8cd2; text-decoration:none; }
        a:hover{ text-decoration:underline; }
        .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
        .clearfix{ display:inline-block; }
        .clearfix{ display:block; }
        .clear{ clear:both; height:0; font:0/0 Arial; visibility:hidden; }
        .none{ display:none }
    </style>
    <script>
        /*
        在这也是起作用的
        $(document).ready(function(){
            $('#submit').on('click', function (e) {
                alert(1);
            });
        });
        */
    </script>
</head>
<body>
<button id="submit">test</button>
<script>
    // 在这才会起作用
    $('#submit').on('click', function (e) {
        alert(1);
    });
</script>
</body>
</html>
多谢
蝶恋花雨 2015-07-24
  • 打赏
  • 举报
回复
一个是页面加载之后点击运行。页面没加载完,得不到button id, 一个是直接点击运行
豪情 2015-07-24
  • 打赏
  • 举报
回复
查看在线演示: http://jsbin.com/xilepi/edit?html,output 可以运行的,代码是没有问题。 区别在于,dom.ready在页面加载完之后运行,与代码位置无关,下面的代码要想起作用就必须放在页面的后面。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script>
    <style type="text/css">
        *{ margin:0; padding:0; }
        body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
        a{ color:#0a8cd2; text-decoration:none; }
        a:hover{ text-decoration:underline; }
        .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
        .clearfix{ display:inline-block; }
        .clearfix{ display:block; }
        .clear{ clear:both; height:0; font:0/0 Arial; visibility:hidden; }
        .none{ display:none }
    </style>
    <script>
        /*
        在这也是起作用的
        $(document).ready(function(){
            $('#submit').on('click', function (e) {
                alert(1);
            });
        });
        */
    </script>
</head>
<body>
<button id="submit">test</button>
<script>
    // 在这才会起作用
    $('#submit').on('click', function (e) {
        alert(1);
    });
</script>
</body>
</html>

87,942

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧