JQuery教程:页面加载后自动执行

提出问题

下面的代码,点击按钮是没有反应的,因为按照 从上往下 的执行顺序,是 先执行绑定按钮事件,然后再加载 按钮

由于绑定按钮事件时,还没有加载 按钮,所以没有绑定上

<script src="scripts/jquery-1.11.0.js"></script>

<script>
$("#btn").click(function (e) {
    alert(11)
})
</script>

<button id="btn">测试</button>

分析

两种解决方法:

  1. 将绑定按钮事件的代码,放在 按钮 的下面(简单,但一般将js代码写在 <head> 标签中)

  2. 当页面加载dom后,自动执行代码,写法见下面(推荐,此代码可放在任意位置)

写法1

<script src="scripts/jquery-1.11.0.js"></script>

<script>
$(function (){
    $("#btn").click(function (e) {
        alert(11)
    })
})
</script>

<button id="btn">测试</button>

写法2

<script src="scripts/jquery-1.11.0.js"></script>

<script>
$(document).ready(function() {
    $("#btn").click(function (e) {
        alert(11)
    })
})
</script>

<button id="btn">测试</button>

原文出处:/show_1IX5la3eF5ig.html