jQuery-jquery 能否使用live绑定toggle事件?

jQuery-jquery 能否使用live绑定toggle事件?

归属感 发布于 2016-10-30 字数 389 浏览 1158 回复 3

现在有一个对div元素点击换不通的颜色的需求:
请输入图片描述
style:

.box div{
border: 2px solid #CCCCCC;
width:10px;
height:10px;
margin-right:5px;
float:left;
cursor:pointer;
}

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

灵芸 2017-10-12 3 楼

给你写了一个,并且测试过了,你试试吧

<script language="javascript">
$(function(){
$('.box').append("<div class='news_div'>toggle前新加的div1</div>");//测试:动态添加di
$('.box>div').live('click',function(){
$(this).toggle(function(i){
$(this).css('background-color','#33FFFF');
},
function(i){
$(this).css('background-color','#33FF00');
},
function(i){
$(this).css('background-color','#0066CC');
}
);
$(this).trigger('click');
});
$('.box').append("<div class='news_div'>新加的div1</div>");//测试:动态添加div
$('.box').append("<div class='news_div'>新加的div2</div>");//测试:动态添加div
$('.box').append("<div class='news_div'>新加的div3</div>");//测试:动态添加div
$('.box').append("<div class='news_div'>新加的div4</div>");//测试:动态添加div
$('.box').append("<div class='news_div'>新加的div5</div>");//测试:动态添加div
});
</script>

夜无邪 2017-09-23 2 楼

根据js事件冒泡的原理,可以将事件绑定到父节点上。这也是jquery live()的主要实现方式,

基于这个原理,可以将你以上的代码简单的改为:

 $(".box").toggle(function(e){
$(e.target).css('background-color','#33FFFF');
},function(e){
$(e.target).css('background-color','#33FF00');
},function(e){
$(e.target).css('background-color','#0066CC');
}
);
$("<div></div>").appendTo(".box");

上边其实做的并不完善(只针对了你上边的需求),还需要判断下,点的是不是子元素中指定处理事件的元素,那么可以通过e.target.tagName 判断,以及class等都可以作为判断的条件。。

虐人心 2017-05-10 1 楼

兄弟,用livequery替换live来绑定。了解一下livequery吧,它可以对并不存在的dom结点绑定事件,即使当前页面没有dom结点,以后当你添加后事件会自动注册到这个结点上面去!

 $(".box>div").livequery('click',function(){
$(this).toggle(function(){
$(this).css('background-color','#33FFFF');
},function(){
$(this).css('background-color','#33FF00');
},function(){
$(this).css('background-color','#0066CC');
}
);
})