jQuery的事件預綁定

更新時間：2016年12月05日 11:32:54 投稿：mrr

這篇文章主要介紹了jQuery的事件預綁定的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

1. 預綁定

首先解釋一下什么叫預綁定。預綁定，顧名思義，就是在Web頁面上的控件還沒出現(xiàn)之前就綁定好事件。預綁定主要是指jQuery中的.on()方法。

2. Demo

HTML代碼

<div id="root">
<input type="button" id="test" value="test"/>
</div>

一般的jQuery代碼：

$('#root').find('#test').on('click', function() {
...
});

預綁定的jQuery代碼：

$('#root').on('click', '#test2', function() {
...
});

jQuery添加控件的代碼

$('#root').append('<input type="button" id="test" value="test2"/>')

解釋：在頁面控件直接顯示的情況下，例如'test'，上面的兩種綁定控件事件的方法都沒問題，都可以正常工作，但如果上面的HMTL代碼是在模板中，例如jsview中，模板數(shù)據(jù)不是頁面加載時就添加的，或者上面的HTML代碼開始不在頁面上，是通過jQuery添加的，例如test2是在頁面加載之后某個時刻添加的控件，使用一般的綁定控件事件的代碼就會有問題，你會發(fā)現(xiàn)控件沒有綁定事件，而使用預綁定的方法，控件的事件就能綁定上，即使控件是后來添加的。

上面的內(nèi)容就是jQuery的事件預綁定，jQuery文檔地址為：http://api.jquery.com/on/。

以上所述是小編給大家介紹的jQuery的事件預綁定，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

jquery 合并內(nèi)容相同的單元格(示例代碼)
這篇文章主要是對jquery合并內(nèi)容相同的單元格示例代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery picswitch圖片焦點圖展示效果
jquery pictureswitch制作圖片展示效果實現(xiàn)代碼，對于想用jquery實現(xiàn)焦點圖效果的朋友可以參考下。
2010-05-05
推薦40個簡單的 jQuery 導航插件和教程(下篇)
在下面的集合中，你會發(fā)現(xiàn)很多便利的 jQuery 導航插件和有用的教程，幫助你實現(xiàn)充滿吸引力的網(wǎng)站導航，讓你網(wǎng)站更有組織性和交互性
2012-09-09
使用jquery提交form表單并自定義action的方法
下面小編就為大家?guī)硪黄褂胘query提交form表單并自定義action的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
bootstrap data與jquery .data
最近在做項目的時候用到了bootstrap，在使用中發(fā)現(xiàn)其data與jquery的data有些不一樣的地方，記錄一下，分享給大家
2014-07-07
jQuery創(chuàng)建DOM元素實例解析
這篇文章主要介紹了jQuery創(chuàng)建DOM元素的方法,實例分析了jQuery使用$直接創(chuàng)建DOM元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
淺談jQuery中replace()方法
這篇文章主要介紹了jQuery中replace()方法用法,實例分析了replace()方法的功能、定義及匹配元素去替換指定內(nèi)容的方法,需要的朋友可以參考下
2015-05-05
jquery定時滑出可最小化的底部提示層特效代碼
當打開頁面或者刷新頁面后等待兩秒鐘，會在底部滑出可最小化的提示層?；鰧影胪该?，可關閉再現(xiàn)。應用范圍很廣，比如彈出廣告、彈出注冊層、彈出最新消息等，實現(xiàn)的jquery代碼比較簡單
2013-10-10
jquery實現(xiàn)輸入框實時輸入觸發(fā)事件代碼
本文主要分享了jquery實現(xiàn)輸入框實時輸入觸發(fā)事件的代碼，代碼簡單易懂，需要的朋友一起來看下吧
2016-12-12
jQuery DOM插入節(jié)點操作指南
本章節(jié)主要介紹了jQuery在HTML中動態(tài)插入節(jié)點的各種方法,制作成表格，方便大家對比學習，需要的朋友可以參考下
2015-03-03