使用js動態添加點擊事件時，click與onclick的區別，jsonclick
今天在做項目的時候遇到了一個問題，就是通過js動態綁定事件的問題。在網上收索了下，然後自己寫了一個個很簡單的DOM實驗了一下！
1、jsp代碼
<body><p>定義第一個添加按鈕</p><input type="button" value="第一個按鈕" id="oneAdd"/></br></br></br><p>定義一個DIV</p><div style="width: 400px;height: 150px;border:1px solid #000;" id="div"></div></body>
2、js代碼<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function(){//給添加按鈕，首先使用click的方式$("#oneAdd").click(function(){//在div裡面添加第二個按鈕console.log("點擊了第一個按鈕")$("#div").html("<input type='button' value='第二個按鈕' id='twoAdd' />");})//給第二個按鈕一個添加事件，同樣是使用click的方式//第一個方法/*$("#twoAdd").click(function(){console.log("點擊了第二個按鈕")})//第二個方法$("#twoAdd").on("click",function(){console.log("點擊了第二個按鈕")})*///第三個方法$("#div").on("click","#twoAdd",function(){console.log($(this).attr("type"))//取消按鈕一的點擊事件$("#oneAdd").off("click");})})</script>
3、結果點擊第一個按鈕可以正常觸發cilck事件，當啟用方法一時，按鈕無法正常觸發click事件當啟用方法二時，按鈕無法正常觸發click事件當啟用方法三時，按鈕可以正常觸發click事件
4、總結1、在頁面初始化的時候已經給定固定的id時，cilck和onclick都可以正常使用；2、當頁面動態載入一個id時，使用click將失去作用，必須使用onclick才可以正常運行；3、element.click()這種寫法不支援給動態元素或樣式綁定事件。支援給動態元素繫結事件的是.live()和.on()。live在jQquery1.7後就不推薦使用了。使用.on()時注意，on前面的元素必須在頁面初始化的時候就存在靜態頁裡面，這也是為什麼方法而不能正常使用的原因。
5、參考一、http://blog.csdn.net/webzhuce/article/details/53981556二、http://blog.csdn.net/jalon2015/article/details/46535777
-
頂
-
1
-
踩
-
1
查看評論
