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

0 0

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

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

  .box div{
  

  border: 2px solid #CCCCCC;
  

  width:10px;
  

  height:10px;
  

  margin-right:5px;
  

  float:left;
  

  cursor:pointer;
  

  }

html:

  <div class="box" >
  

  <div></div>
  

  <div></div>
  

  <div></div>
  

  </div>

js:

  $(".box>div").toggle(function(){
  

  $(this).css('background-color','#33FFFF');
  

  },function(){
  

  $(this).css('background-color','#33FF00');
  

  },function(){
  

  $(this).css('background-color','#0066CC');
  

  }
  

  );

以上代码可以使用，但是新创建出来的元素没有效果，所以改为用live绑定click事件。

  $(".box>div").live('click',function(){
  

  $(this).toggle(function(){
  

  $(this).css('background-color','#33FFFF');
  

  },function(){
  

  $(this).css('background-color','#33FF00');
  

  },function(){
  

  $(this).css('background-color','#0066CC');
  

  }
  

  );
  

  })
  

  $(".box>div").trigger('click'); //触发click事件，绑定toggle

这样虽然也能解决但是第一次点击才给元素绑定了toggle事件，所以还需要先触发一次click事件，如：$(".box>div").trigger('click'); , 这样每次新创建出来的元素都需要写为类似下边：

  $("<div></div>").appendTo(".box").trigger('click'); //新创建元素并触发click事件

这样虽然解决了现在的需求，但是感觉好复杂，同样一个功能jquery能有N种写法，不知道jquery可否用live绑定 toggle 事件（我没试出来）？或者大家对新创建出来的元素绑定toggle事件是怎么处理的？我想应该有比我上边简单的方法吧？

jquery HTML

12 years, 8 months ago

黑色鬼祟鸟

黑色鬼祟鸟 12 years, 8 months ago

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

  }
  

  );
  

  })

answered 12 years, 8 months ago

唐伯虎点雷管

唐伯虎点雷管 answered 12 years, 8 months ago