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

Question

现在有一个对div元素点击换不通的颜色的需求：

style:

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

Answer 1

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

<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>

Answer 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等都可以作为判断的条件。。

Answer 3

兄弟，用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');
}
);
})