JqueryOn系結事件方法介紹
1. 簡介
(1) On()方法在被選及子元素上添加一個或多個事件處理程式
(2) 在jquery 版本1.7起，on()方法是bind(),live()和delegate()方法的新的替代品，該方法給API帶來很多便利，簡化了JQUERY代碼庫，
(3) 使用on()方法添加的事件處理程式適用于當前及未來的元素(比如由腳本創建的新元素)
2. 目前了解到使用場景
(1) 使用ajax請求資料時使用，
(2) 對加載完頁面之后的元素進行事件系結，
3. 注意事項
(1) 你使用jquery追加的元素要在一個不會進行改變的父級之下，可以是DOCUMENT，
(2) 系結有兩種方式
① 單個事件系結
1) $(“#id”).on(‘click’,function(){}) 把點擊事件系結到id為id的元素身上
2) $(“#id”).on(‘click’,’.div’,function(){}) 把點擊事件系結到id為id的子級元素類名為div的元素身上
② 多事件同時系結到一個元素上
③ $(“.div”).on({
mouseover:function(){$(“body”).css(“background-color”,”red”)},
mouseout:function(){$(“body”).css(“background-color”,”yellow”);},
click:function(){$(“body”).css(“background-color”,”green”)}
})
4. 案例
<div >
<button > 測驗 </button>
<button > 測驗_測驗 </button>
<div>
<button > 測驗1 </button>
<button > 測驗_測驗1 </button>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ENTRUST</title>
</head>
<body>
<div>
<button> 測驗 </button>
<button> 測驗-測驗-測驗 </button>
<div>
<button> 測驗1 </button>
<button> 測驗-測驗ButtonA </button>
</div>
</div>
<script type="text/javascript" src="https://www.cnblogs.com/js/jquery-1.8.3.js"></script>
<script>
$(".onCase").on("click",".onCaseButtonA",function(){
console.log(this.class,"測驗—class-onCaseButtonA");
});
$('.onCaseButton').click(function () {
console.log(this.class,"測驗—class-onCaseButton")
});
$('.Button').click(function () {
$('<button> 測驗-Button </button>').append();
});
$('.ButtonA').click(function () {
$("<button> 測驗-測驗ButtonA </button>").append();
});
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34128.html
標籤：jQuery
上一篇：jq處理影片累加