其实是需要添加一次性事件,原本用one方法,就可以解决。
实现这样的功能,如:name为abc开始的a元素 第一次点击时输出它的内容
$("a[name^='abc']").one(function(
console.log($(this).html());
));
但是one方法不支持动态创建的元素。所有用 delegate
$(document).delegate("a[name^='abc']","click",function(){
console.log($(this).html());
//这里我需要点击一次后 再删除此click绑定
$(document).undelegate($(this),"click"); //这句不管用
$(this).undelegate("click"); //也不管用
//手册上说undelegate第一个参数需要指定一个单独的selector,
//a[name^='abc']取到的是一个元素集,用它后会删除掉所有绑定。
//没有被点过的也删除了。求解,我只需要被点一次后的元素删除click事件
})
同意楼上的,bind
,delegate
都是用on
实现的,在jq-1.11.2
中,源码如下:
jQuery.fn.extend({
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
},
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
});
楼主的意思应该是:
页面有多个 a[name=^'abc']的元素, 通过委托在document绑定了click事件,绑定成功,需要在点击一次后,再次点击不再触发事件;
解决方法:
1. 利用 $object.data()存储数据,判断是否被点击过;
$(document).on('click', 'a[name^="abc"]', function(e) { //委托,实现绑定click事件
if (!$(this).data('clicked')) { //判断是否已经被点击,
// 第一次点击因为 $(this).data('click')为 undefined
linkClickHandler.call(this); //调用处理函数
$(this).data('clicked', true); //设置 "已点击"
}
return false; //返回false,阻止默认行为,因为 <a>自动跳转
});
function linkClickHandler() { // 事件处理函数
// 函数中的this指向触发的元素 , 为 DomElement类型
//TODO
console.log($(this).text());
}
用on 不要用delegate了
<div id="target">test</div>
<script type="text/javascript">
$('#target').on('click', function() {
var self = $(this);
alert(self.text());
self.off('click');
});
on包办现在和未来的元素,还可以指定范围,指定seletor,减少事件数量,提高遍历速度,棒棒哒。
bind, live, delegate在1.9后就已经不推荐了,现在只要一个on代替曾经所有~
以上
不论是用楼上所说的 on ,还是 delegate。
我用的selector是 a[name^='abc'] ,查找出来的是一个元素集。
绑定是没有问题。但是取消绑定会有问题。无法对当前触发的元素进行取消绑定。