jquery on事件绑定-JQuery 中点击事件和实时绑定点击事件的区别

$(document).ready(function() {
    $('#divid').click(function() {
        console.log('你好');
    });
});

 
 
	

$(function(){
     var message="把该信息传递给Fn函数";
     $("#divid").click({msg:message},function(event){           
                   $("#idTip").show().html(event.data.msg);
               }
     );//设置文本
     });
	

总结：在文档流中，通过scripts.so动态添加的元素（符合性）没有绑定点击事件

2.直播绑定风暴

$('#divId').live('click', function() {
    console.log('hello');
});

摘要：后续通过脚本动态添加的元素（符合性）也绑定到点击事件。 请注意，该方法仅在 jQuery1.9 之前的版本中可用。

3. jQuery中live()方法改为on()方法 1. live()方法

实时（类型，[数据]，fn）

将事件处理程序附加到所有匹配元素，即使该元素是稍后添加的。

原则：

live() 方法适用于由于使用了 Storm 委托而尚未添加到 DOM 的元素：绑定到祖先元素的 Storm 处理程序可以响应在后代上触发的 Storm。 传递给 live() 的风暴处理函数不会绑定到元素，但会作为特殊的事件处理函数绑定到 DOM 树的根节点。

案件：

    
    $(function(){
        /*live()方法，在jQuery1.9中被移除*/
        $("div").live("click",function(){
            $(this).hide();
        });
    });

摘要： live() 方法在 jQuery1.7 中已被弃用jquery on事件绑定，该技术在 jQuery1.9 中被删除，并由 jQuery1.9+ 中的 on() 方法取代。

2.on()方法

on(events,[selector],[data],fn) 在所选元素上绑定一个或多个风暴处理函数。

参数说明：

events：由空格和可选命名空间分隔的一种或多种事件类型，例如“click”或“keydown.myPlugin”。

选择器：一个选择器字符串，用于过滤触发风暴的选择器元素的后代。 如果选择为空或省略，则当事件到达所选元素时始终会触发该事件。

data：当风暴触发时，应将 event.data 传递给风暴处理函数。

fn：风暴触发时执行的函数。 false 值也可以用作返回 false 的函数的缩写。

jQuery1.9官方文档中的一些描述：

【Changes of Note in jQuery 1.9】
    The .live() method has been deprecated since jQuery 1.7 and has been 
instead. To exactly match $("a.foo").live("click", fn), for example, you 
can write $(document).on("click", "a.foo", fn). For more information, see 
the .on() documentation. In the meantime, the jQuery Migrate plugin can be
 used to restore the .live() functionality.

例子：

1、绑定点击事件，使用off()方法去掉on()绑定的方法

 




$(document).ready(function(){
  $("#dd").on("click",function(){
             $(this).css("background-color","pink");
     });
    $("#ddd").click(function(){
         $("#dd").off("click");  //使用off()方法移除标签p上的on()所绑定的方法
        
    });
});



点击这个段落。
去掉on方法。

2.多个风暴绑定同一个函数

 




$(document).ready(function(){
    $("#dd").on("mouseover mouseout", function(){
$("body").css("background-color","lightgray");
          
    });
   $("#ddd").on("mouseover mouseout", function(){
$("body").css("background-color","red");
          
    });
});



点击这个段落。
点击这个段落。

3、多个风暴绑定不同的功能

 




           $(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});



点击这个段落。

4. 绑定自定义事件

 



 


   Button #1
        
            //自定义事件
            $(document).on("event_mzwu_com", function(event, param1, param2) {
                alert(param1 + "n" + param2);
            });
            //触发自定义事件
            $("button:first").click(function() {
             //param1对应"Custom"，param2对应 "Event"
                $(document).trigger("event_mzwu_com", ["Custom", "Event"]);
            });
        

5. 向函数传递数据

 




$(document).ready(function(){
   //传递数据到函数
	$("#dd").on("click", {msg: "你刚惦记我了!"}, handlerName)
	
});
//自定义函数	 
function handlerName(event)
{
  alert(event.data.msg);
}



点击这个段落。
 

6.应用于未创建的元素

 




$(document).ready(function(){
	var message="把该信息传递给Fn函数";
	//div下的p元素
    $("div").on("click","p",{msg:message},function(event){
        alert(event.data.msg);
  });
	
$("button").click(function(){
    $("
This is a new paragraph.
").insertAfter("button");
  });
	
});
//自定义函数	 
function handlerName(event)
{
  alert(event.data.msg);
}





按钮
	
	
不在范围内