在jQuery中,on事件change代表元素的值發(fā)生變化時觸發(fā)。change事件可以用于各種表單元素,如input,select和textarea。使用jQuery的on方法可以綁定change事件的處理程序:
$("input").on("change", function(){ // 處理代碼 });
在上面的代碼中,我們選擇所有input元素,并將change事件綁定到它們。當元素的值改變時,處理程序?qū)⒈徽{(diào)用。
當然,我們還可以通過選擇器縮小目標元素的范圍:
$("#myInput").on("change", function(){ // 處理代碼 });
在上面的代碼中,我們選擇具有ID“myInput”的元素,并將change事件綁定到它。當元素的值改變時,指定的處理程序?qū)⒈挥|發(fā)。
使用on()方法綁定事件處理程序可以確保在新添加的元素上也能夠工作:
$("body").on("change", "input", function(){ // 處理代碼 });
在上面的代碼中,我們將change事件綁定到body元素,并指定特定的選擇器(input)。當在body中添加新元素時,也將自動綁定到change事件處理程序。
綁定change事件的另一個常見用途是在表單驗證期間。
例如,我們可以在input的change事件上綁定一個處理程序來驗證輸入是否為有效的電子郵件地址:
$("input[type='email']").on("change", function(){ var value = $(this).val(); if(value && value.indexOf("@") === -1){ alert("請輸入有效的電子郵件地址"); } });
上面的代碼將選擇所有type屬性為' email'的input元素,并在其change事件上綁定處理程序。如果輸入不包含“@”符號,則會觸發(fā)警報。
總之,jQuery的on事件change允許我們捕獲表單元素值的變化,并在需要時執(zhí)行處理程序。借助on()方法的強大功能,我們可以實現(xiàn)自動綁定到新元素,以及在表單驗證等常見方案中使用它。
上一篇段間距 css