我在使用委托获取$ .each等效语法时遇到了问题.
我读过的所有示例都只显示了单击或悬停,但我将如何使用委托语法编写它?
$("ul li a").each(function(){
$(this).addClass("foo");
});
Run Code Online (Sandbox Code Playgroud)
干杯!!
编辑:遵循众多评论(感谢顺便说一句)我想我最好发布一个更明确的例子.我对前一个问题中缺乏细节表示歉意.
比方说,我想将工具提示绑定到页面上的锚点.我将有很多项目要设置为提示,我希望通过使用委托来减少内存开销.
据我所知,这是我开始的方式:
$(document).delegate("a.tooltip", "click", function(event){
// run click event
}).delegate("a.tooltip", "hover", function(event){
// run mousenter, mouseleave events.
});
Run Code Online (Sandbox Code Playgroud)
但是,让我们说每个锚点我想要删除title属性,以便在我悬停时它不会显示在浏览器中.我想(虽然我猜这里)任何像这样的本地事件都会在我的悬停事件之前运行,所以我想在我悬停之前删除它.
通常我会使用这样的东西:
$("a.tooltip").each(function () {
// Store our title attribute and remove it so we don't get browser
//tooltips showing up.
$.prop(this, "data-old-title", $.attr(this, "title"));
}).removeAttr("title");
Run Code Online (Sandbox Code Playgroud)
这可以做得更好吗?
根据我在评论和答案中的理解,代表只涵盖事件,我仍然必须保持这样的事情.
你可能误解.delegate()了它是什么或如何运作.它不是拦截所有DOM操作的某种神奇函数,它只是利用了DOM的事件冒泡功能,因此它只能用于事件.
基本上,如果你有一个<div>元素,你打算<button>稍后添加一个元素,你可以.delegate()用来将click事件绑定到它<div>自己.
在未来,当你做的添加按钮,点击它会触发按钮的点击事件,它会继续向上冒泡的DOM,呼吁在继承各父元素的click事件,直到它到达文档根目录或一个处理程序调用event.stopPropagation().在某一点上,它会到达你的<div>,你绑定你的委托事件.委托事件将检查最初触发事件的元素是否与原始选择器(您想要首先绑定事件)相匹配,如果匹配,则会在按钮的上下文中触发附加的事件处理程序,所以在事件处理程序中,它看起来像按钮抛出事件.
如你所见,没有任何魔力,它与监视DOM的变化或类似的东西无关.如果要在向DOM添加元素时添加特殊类,则必须确保在发生这种情况时自己调用函数.