V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Derek964
V2EX  ›  JavaScript

请教 JS 和 JQuery 的问题,按钮点击时间如何关联起来的

  •  
  •   Derek964 · 2021-09-04 11:24:19 +08:00 · 1788 次点击
    这是一个创建于 1202 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我的代码如下: '''======================================

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Title</title> </head>
    <script>
        //绑定‘单击事件’的 jQuery
        $('#all_move1').click(function(){
        alert('AA');
        })
    
        //绑定‘单击事件’的 jQuery
        $('#all_move2').bind('click',function(){
        alert('BB');
        })
    
        //绑定‘单击事件’的 javascript
        document.getElementById('all_move1').onclick=function(){
            alert('CC');
        }
    
        //函数式
        function danji(){
            alert('DD');
        }
    
    </script>
    
    <body> <button id="all_move1" >按钮 1</button>

    <button id="all_move2" onclick="danji()" >点击按钮 2</button> </body> </html>

    '''=============================

    这里为什么发现只有“点击按钮 2”,点击了之后会有 alert 。 只有函数式的方法可以生效, 为什么前面三种方法不行呢? 我用的 chrome 浏览器

    6 条回复    2021-10-23 17:13:20 +08:00
    Building
        1
    Building  
       2021-09-04 11:30:15 +08:00 via iPhone
    因为你把 script 放在了 body 前面。
    kop1989
        2
    kop1989  
       2021-09-04 11:33:28 +08:00 via iPhone
    绑的太早了。
    js 执行绑定的时候,真正的 dom 还没有出现。
    所以你这个点击事件相当于绑了个寂寞。

    要么将绑定逻辑放在 ready 事件的回调中,要么使用 html 的 onclick 声明。
    kop1989
        3
    kop1989  
       2021-09-04 11:36:59 +08:00
    btw 你并没有引用 Jquery 的库,所以第一行的$就已经报错了。
    FragmentLs
        4
    FragmentLs  
       2021-09-04 11:37:20 +08:00
    1 & 2: 因为你没引入 jquery......
    3: 你的 js 没 defer
    Rache1
        5
    Rache1  
       2021-09-04 11:41:21 +08:00
    你这不只是给 2 绑定了一个事件吗,而且你这个还是 DOM 的前面绑定的,JS 执行的时候都没有这个元素,实际上都是没绑上


    打印 1 还是 2,取决于 JS 片段放的位置。

    http://jsrun.net/gZTKp/edit
    loading
        6
    loading  
       2021-10-23 17:13:20 +08:00
    用了 jQuery ,不知道 $().ready(). ?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1103 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:24 · PVG 03:24 · LAX 11:24 · JFK 14:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.