Oma*_*mar 26 javascript methods jquery binding
我经常使用
$(selector).click(...
但有些人建议我改用它:
$(selector).on("click", function(...
或$(selector).live("click"... (已弃用)
我阅读了手册,但是我的乞丐心里无法理解.我对他们使用的所有术语感到困惑.我仍然不知道差异,也不知道为什么要使用.on()
http://api.jquery.com/on/
dav*_*ers 33
在一天结束时,每个事件都绑定到DOM中的某个元素.在这种情况下.bind,您将直接绑定到jQuery对象中的元素(或元素).例如,如果您的jQuery对象包含100个元素,那么您将绑定100个事件侦听器.
在的情况下.live,.delegate以及.on,一个单个事件侦听器绑定,一般上在DOM树中最上面的节点中的一个:document,document.documentElement(所述<html>元件),或document.body.由于DOM事件在树中冒泡,因此附加到body元素的事件处理程序实际上可以接收源自页面上任何元素的单击事件.因此,不是绑定100个事件,而是只绑定一个.
对于少量元素(比如少于5个),直接绑定事件处理程序可能会更快(尽管性能不太可能成为问题).对于大量元素,请始终使用.on.
另一个优点.on是,如果向DOM添加元素,则无需担心将事件处理程序绑定到这些新元素.以一个HTML列表为例:
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
接下来,一些jQuery:
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
现在,如果我们添加一个待办事项怎么办？
$('#todo').append('<li>answer all the questions on SO</li>')
单击此待办事项项不会将其从列表中删除,因为它没有绑定任何事件处理程序.如果我们使用了.on,新项目将无需任何额外的努力.以下是.on版本的外观:
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
che*_*vim 12
在平原中,.click(...如果选择器的目标在运行中发生变化(例如通过一些ajax响应),那么您需要再次分配行为.
在.live(...行为将自动重新应用于选择器.
这.on(...是非常新的(jQuery 1.7),它可以live使用委托事件来覆盖场景,这是一种更快的方式来附加行为.
唯一的区别是,.click()将应用于具有该特定选择器的DOM中存在的元素(仅存在已存在的元素).
另一方面.on(selector ,"click",callback);,即使将来也将应用于与该选择器匹配的所有元素,让我举个例子:
$('p').click(function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
如果你点击"这是前一段的副本"(新的一段)的段落,你不会得到你想要的结果,即在点击的那一段旁边添加一个段落,因为它不在那里一开始
但如果你使用
$('p').on("click",function(){
$(this).next('<p>this is a copy of the previous paragraph </p>');
});
你会得到你想要的东西(因为.on或者.delegate找到匹配的新的)
| 归档时间： |
|
| 查看次数： |
13149 次 |
| 最近记录： |