jquery中關(guān)于bind()方法的使用技巧分享
更新時間：2017年03月30日 09:11:20 作者：Romennts
這篇文章主要給大家分享了jquery中關(guān)于bind()方法的使用技巧，文中介紹的非常詳細，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。
.bind()方法可使用.on()方法來代替
on()方法提高代碼易讀性，如下
$("input").bind("click", { foo: "hello" }, handler);
$("input").on("click", { foo: "hello" }, handler);
bind()綁定事件的時候，這些元素必須已經(jīng)存在，而on()可以處理類似于代理這樣的東東，也就是說不存在的元素（動態(tài)生成的元素也可以處理），如下動態(tài)生成的 To do list ，再雙擊刪除，可使用on()輕松完成，你會發(fā)現(xiàn)，on換成bind是不行的。
<input type="text" id="str"> <button id="btn">添加</button> <h3>To do list</h3> <ul></ul>
$(document).ready(function(){
$('#btn').on('click',function(){
var str = $('#str').val();
$('<li>').text(str).appendTo('ul');
$('#str').val('');
})
//To do list雙擊刪除
$(document).on('dblclick','li',function(){
$(this).remove();
})
});
on()事件綁定的妙用：我們經(jīng)常要在網(wǎng)頁里面處理大量的表格，假設(shè)表格有1000行，如果為每個tr都綁定一個click事件是非常占用內(nèi)存的，而更加優(yōu)雅的方法是：使用父元素tbody作事件代理，只需綁定一次，子孫元素tr上發(fā)生的事件會冒泡到tbody進行處理，節(jié)省開銷
//效率低下的寫法
$( "#dataTable tbody tr" ).on( "click", function() { \……
//換成優(yōu)雅高效滴
$( "#dataTable tbody" ).on( "click", "tr", function() { \……
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章介紹了jQuery焦點圖切換特效插件封裝實例，有需要的朋友可以參考一下2013-08-08
這篇文章主要為大家詳細介紹了基于JQuery實現(xiàn)圖片輪播效果，利用Jquery制作焦點圖左右輪播特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
我將會在下面的例子中一個一個的說明上面這幾個條件,做完這些事情后我們就會創(chuàng)建一個高亮顯示text的簡單插件。2009-09-09
jquery表單驗證插件（jquery.validate.js）的3種使用方式
這篇文章主要介紹了jquery表單驗證插件（jquery.validate.js）的3種使用方式,本文用詳細的代碼實例講解jquery表單驗證插件的使用,需要的朋友可以參考下2015-03-03
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁面扁平化的普及，越來越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11
本篇文章主要介紹了Jquery-data的三種用法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了jquery實現(xiàn)圖片左右切換的方法,設(shè)計jQuery操作頁面元素及對應(yīng)樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-05-05
在web開發(fā)當(dāng)中，工具提示條對于完善web網(wǎng)站的用戶體驗至關(guān)重要。title屬性通常是用來幫助用戶了解顯示鏈接的信息2012-09-09
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼
基于jquery實現(xiàn)狀態(tài)限定編輯的代碼，需要的朋友可以參考下2012-02-02
文章十分詳盡的匯總了jquery常用的方法，并進行了對比，同時附送示例，是篇非常不錯的文章，希望對大家有所幫助2014-11-11