夏日博客

A-A+

jquery on() 方法绑定动态元素的例子

2016年01月12日 前端设计 暂无评论 阅读 6 views 次

on()函数用于为指定元素的一个或多个事件绑定事件处理函数了，从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数了，下面一起来看几个jquery on() 方法绑定动态元素的例子.

即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件，例如append等。

  1. <div id="test">  
  2.     <div class="evt">evt1</div>  
  3. </div>  

错误的用法，下面方法只为第一个class 为 evt 的div 绑定了click事件，使用append动态创建的div则没有绑定

  1. <script>  
  2.     // 先绑定事件再添加div  
  3.     $('#test .evt').on('click', function() {alert($(this).text())});  
  4.     $('#test').append('<div class="evt">evt2</div>');  
  5. </script>  

正确的用法如下:

  1. <script>  
  2.     $('body').on('click', '#test .evt', function() {alert($(this).text())});  
  3.     $('#test').append('<div class="evt">evt2</div>');  
  4. </script>  

如果你需要移除on()所绑定的方法，可以使用off()方法处理。

  1. $(document).ready(function(){  
  2. 　　$("p").on("click",function(){  
  3. 　　　　$(this).css("background-color","pink");  
  4. 　　});  
  5. 　　$("button").click(function(){  
  6. 　　　　$("p").off("click");  
  7. 　　});  
  8. });  

tip:如果你的事件只需要一次的操作，可以使用one()这个方法

  1. $(document).ready(function(){  
  2. 　　$("p").one("click",function(){  
  3. 　　　　$(this).animate({fontSize:"+=6px"});  
  4. 　　});  
  5. });  

多个事件绑定同一个函数

  1. $(document).ready(function(){  
  2.   $("p").on("mouseover mouseout",function(){  
  3.     $("p").toggleClass("intro");  
  4.   });  
  5. });  

多个事件绑定不同函数

  1. $(document).ready(function(){  
  2.   $("p").on({  
  3.     mouseover:function(){$("body").css("background-color","lightgray");},    
  4.     mouseout:function(){$("body").css("background-color","lightblue");},   
  5.     click:function(){$("body").css("background-color","yellow");}    
  6.   });  
  7. });  

绑定自定义事件

  1. $(document).ready(function(){  
  2.   $("p").on("myOwnEvent", function(event, showName){  
  3.     $(this).text(showName + "! What a beautiful name!").show();  
  4.   });  
  5.   $("button").click(function(){  
  6.     $("p").trigger("myOwnEvent",["Anja"]);  
  7.   });  
  8. });  

传递数据到函数

  1. function handlerName(event)   
  2. {  
  3.   alert(event.data.msg);  
  4. }  
  5. $(document).ready(function(){  
  6.   $("p").on("click", {msg: "You just clicked me!"}, handlerName)  
  7. });  

适用于未创建的元素

  1. $(document).ready(function(){  
  2.   $("div").on("click","p",function(){  
  3.     $(this).slideToggle();  
  4.   });  
  5.   $("button").click(function(){  
  6.     $("<p>This is a new paragraph.</p>").insertAfter("button");  
  7.   });  
  8. });  
标签：

给我留言