另一个绑定事件的方式 为元素绑定事件的区别
生活随笔
收集整理的這篇文章主要介紹了
另一个绑定事件的方式 为元素绑定事件的区别
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
另一個綁定事件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 400px;height: 200px;background-color: green;}p {width: 100px;height: 20px;background-color: red;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊按鈕為div綁定事件// 此時on和delegate的作用是一樣的,但是參數的順序是一樣的$("#btn").click(function(){$("<p>這是一個p</p>").appendTo($("#dv"));// 和delegate是一樣的,都是在為子元素綁定事件$("#dv").on("click","p",function(){alert("p被點擊了");});});$("#btn2").click(function(){$("<p>這是一個p2</p>").appendTo($("#dv"));});});</script> </head> <body> <input type="button" value="綁定事件" id="btn"> <input type="button" value="綁定事件" id="btn2"> <div id="dv"></div></body> </html>為元素綁定事件的區別
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jquery-1.12.1.js"></script><script>/*** 對象.事件名字(事件處理函數);---->普通的寫法* 對象.bind(參數1,參數2);---->參數1:事件的名字,參數2:事件處理函數* 前兩種方式只能為存在的元素綁定事件,后添加的事件沒有事件** 下面的兩種方式,可以為存在的元素綁定事件,后添加的元素也有事件* 對象.delegate("選擇器","事件名字",事件處理函數);* 父級元素調用方法,代理子級元素綁定事件* 對象.on("事件名字","選擇器",事件處理函數);* 父級元素調用方法,代理子級元素綁定事件** 因為delegate方法中調用的on的方法* 所以,以后直接用on就可以了*/</script> </head> <body></body> </html>?
總結
以上是生活随笔為你收集整理的另一个绑定事件的方式 为元素绑定事件的区别的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为元素绑定多个相同事件 绑定事件的另一种
- 下一篇： 使用jquery进行多行表格数据验证