這次帶給大家jquery裡的on和click的使用方法,使用jquery裡的on與click的注意事項有哪些,下面就是實戰案例,一起來看一下。
使用jQuery寫js時,有些用on寫行為函數,有些用click,弄清楚二者差異很重要。
以下是用來測試二者差異的HTML程式碼。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
展示jQuery中on()和click()的区别
点击生成新按钮。NewOn生成的Delete按钮行为用on()实现,NewClick生成的Delete按钮行为用click()实现。
js檔案如下:
$("#newclick").click(function(){ $(".li").append('
頁面載入後,點選NewOn和NewClick按鈕,頁面如下圖。
現象:
#原先的HTML元素點擊身後的Delete按鈕就會被刪除。而動態新增的HTML元素,使用click()這種寫法,點選Delete按鈕無法刪除;使用On()方式可以。
原因:
element.click()這種寫法不支援給動態元素或樣式綁定事件。支援給動態元素綁定事件的是.live()和.on()。 live在jQquery1.7後就不建議使用了。使用.on()時注意,on前面的元素必須在頁面載入的時候就存在DOM裡面。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是jquery裡的on和click的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!