jQuery事件处理

最新推荐文章于 2024-07-30 11:51:58 发布

爱凤凤

最新推荐文章于 2024-07-30 11:51:58 发布

阅读量456

点赞数 2

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_29494019/article/details/68925807

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

当我们定义一个普通的事件时，拿click事件为例：

比如说有一个button 按钮，上面有一个点击事件，

方法1. $("button").click(function(){

//... 绑定的事件

})

方法2. $("button").bind('click',function(){

//... 绑定的事件

// 对应的解除绑定的事件

$("button").unbind('click');

})

但是往往有时候我们的点击事件在页面初始化的时候并没有在页面中，是后期追加的代
码，这个时候应该怎么

处理呢？

应该使用 .live() 进行事件绑定, 对应的解除绑定的事件 .die()

<style>
		 .pbox div{padding:10px;width:100px;height:100px;}
		 .pbox div:nth-child(1){background: blue;}
		 .pbox div:nth-child(2){background: yellow;}
		 .pbox div:nth-child(3){background: green;}
		</style>

<div class="pbox">
	  <div>
	    <p>111111</p>
	  </div>
	   <div>
	    <p>22222</p>
	  </div>
	   <div>
	    <p>333333</p>
	  </div>
	  <input type="button" value="执行所有事件">
	</div>

function aa(){
	  $("p").hide();
	  $(".pbox div:first").mouseover(function(){
	    $(this).find("p").fadeIn();
	  });
	  $(".pbox div:last").mouseover(function(){
	    $(this).find("p").fadeIn();
	  },function(){
	    $(this).find("p").fadeIn();
	  });
	  
	  $(".pbox div:nth-child(2)").mouseover(function(){
	    $(this).find("p").fadeIn();
	  });
	  // 同时测试所有事件
	  $(".pbox input").click(function(){
	    $(".pbox div").trigger("mouseover");
	  })
	}

.trigger() 事件可以同时处理.pbox 下面div的鼠标划入事件