请问一个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环境。

...全文

149 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

打赏
举报


<!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>