jQuery為動態新增的按鈕註冊事件處理函式
本章節分享一段程式碼例項,它實現了為動態新增的按鈕註冊時間處理函式的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #ant{ width:200px; height:100px; background:#ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function () { var num = 1, $_div = $('#ant'); $('input[name=addbtn]').on('click', function () { $_div.append('<input type="button" name="antzone' + num + '" value="按鈕' + num + '"/>'); num++; }); $_div.on('click', 'input[name^=antzone]:even', function () { alert('我是有效的on方法,你能看見我嗎:' + this.value); }); $('input[name^=antzone]:odd').on('click', function () { alert('我是無效的on方法,你不能看見我'); }); $('input[name^=antzone]:odd').live('click', function () { alert('我是live方法,你能看見我嗎:' + this.value); }); }); </script> </head> <body> <input type="button" name="addbtn" value="新增按鈕" /> <div id="ant"></div> </body> </html>
上面的程式碼實現了我們的要求,之所以使用on()能夠為動態新增的按鈕註冊事件處理函式,是因為on()可以把事件註冊在父元素上,當觸發新新增按鈕的事件的時候,事件會冒泡到父元素,然後執行事件處理函式。更多內容可以參閱相關閱讀。
相關閱讀:
(1).on()可以參閱jquery on()一章節。
(2).事件冒泡可以參閱什麼是jquery事件冒泡一章節。
相關文章
- JavaScript 註冊事件處理函式JavaScript事件函式
- JavaScript 批量註冊事件處理函式JavaScript事件函式
- for迴圈批量註冊事件處理函式事件函式
- 登陸註冊按鈕的樣式設計
- JavaScript為事件處理函式傳遞引數JavaScript事件函式
- js動態往div裡新增按鈕的兩種方式以及jQuery中$.each的用法詳解JSjQuery
- 如何使用原生的 JavaScript 程式碼,觸發 SAP UI5 按鈕控制元件的點選事件處理函式JavaScriptUI控制元件事件函式
- echarts 繫結事件處理函式Echarts事件函式
- oracle的靜態註冊和動態註冊Oracle
- 動態註冊和靜態註冊
- vue之神奇的動態按鈕Vue
- 如何為資料行的新增操作按鈕
- VOL表格動態新增操作按鈕及彈窗確認方法
- 為 Charles 新增代理頁面按鈕(Rewrite)
- render函式處理動態獲取img的src屬性函式
- Qt更改按鈕樣式 (以QSpinBox使用左右按鈕樣式為例)QT
- Android處理按鈕重複點選Android
- 異形按鈕的點選區域處理
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- VUE動態路由和按鈕的實現Vue路由
- [JS]bootstrapTable新增操作按鈕JSbootAPT
- 在 js 裡定義按鈕的響應函式JS函式
- 如何使用 controllerExtensions 給 SAP Fiori Elements 表格註冊事件響應函式Controller事件函式
- oracle 12c 新增的LREG程式及其動態註冊的過程Oracle
- jQuery入門(七)jQuery實現按鈕分頁jQuery
- Android中動態註冊Android
- vue動態註冊元件Vue元件
- jquery如何讓按鈕不可用jQuery
- js 註冊事件的兩種方式詳解,傳統註冊事件與方法監聽註冊事件(addEventListener)JS事件dev
- QT經驗(一)——按鈕長按事件分析QT事件
- Spring Ioc原始碼分析系列--Ioc容器註冊BeanPostProcessor後置處理器以及事件訊息處理Spring原始碼Bean事件
- 一次Oracle監聽無法動態註冊處理過程排查分析Oracle
- Swoole 回撥函式的註冊與呼叫函式
- 動態建立具有刪除行按鈕的table表格
- Android優雅地處理按鈕重複點選Android
- jQuery點選按鈕刪除div元素jQuery
- SAP:SALV重新整理按鈕事件事件
- DuiLib逆向分析の按鈕事件定位UI事件
- 開發中遇到的jquery函式應用和表單驗證處理jQuery函式