jquery中關于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)頁里面處理大量的表格,假設表格有1000行,如果為每個tr都綁定一個click事件是非常占用內存的,而更加優(yōu)雅的方法是:使用父元素tbody作事件代理,只需綁定一次,子孫元素tr上發(fā)生的事件會冒泡到tbody進行處理,節(jié)省開銷
//效率低下的寫法 $( "#dataTable tbody tr" ).on( "click", function() { \…… //換成優(yōu)雅高效滴 $( "#dataTable tbody" ).on( "click", "tr", function() { \……
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
Jquery操作下拉框(DropDownList)實現(xiàn)取值賦值
Jquery操作下拉框(DropDownList)想必大家都有所接觸吧,下面與大家分享下對DropDownList進行取值賦值的實現(xiàn)代碼2013-08-08jQuery實現(xiàn)控制文字內容溢出用省略號(…)表示的方法
這篇文章主要介紹了jQuery實現(xiàn)控制文字內容溢出用省略號(…)表示的方法,涉及jQuery針對字符串及樣式操作相關技巧,需要的朋友可以參考下2016-02-02