JQuery为何不能运行?

初次调用JQuery的$()好像没有任何效果。例如在下面的实例中,点击按钮后能够正常弹窗:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>测试网页</title>
        <script src="jquery-3.5.1.js"></script>
        <script>
            window.onload = function() {
                var button = document.getElementById("button");
                button.onclick = function() {
                    alert("hello");
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="按钮" id="button" />
    </body>
</html>

但如果换成对JQuery的调用就无法弹窗:

<script>
    window.onload = function() {
        $("#button").onclick = function() {
            alert("hello");
        }
    }
</script>

代码看了几遍也没看出问题。

阅读 2.3k
3 个回答
<script> window.onload = function() {
    $("#button")./*on*/click(/* = */function() {
        alert("hello");
    });
} </script>

或者:

<script> window.onload = function() {
    $("#button")[0].onclick = function() {
        alert("hello");
    }
} </script>

因为 $() 返回的不是 DOM 节点,是 jQuery 对象。所以原生 .onclick() 方法并不存在,只能用 jQuery 的 .on() 方法绑定事件。

不过这会儿再学 jQuery 有点晚了,直接从 MVVM 框架入手吧,推荐 Vue 3。

$(selector).click(...)
$(selector).on("click", ...)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题