说明 :jquery 1.7.2的 live/on事件 ,jquery1.9 版本没有live/on事件 ,
live/on事件 用法: live("事件名称",function(){}); 动态事件 ,它能够与ajax的异步请求结合,如下情景
使用ajax 加载完成 页面后,这时你想在页面元素绑定 click 事件,用$(".tab_title_class").click() 不行的,因为页面加载已经完成,
找不到.tab_title_class 类属性,但是使用 $(".tab_title_class").live("click",function(){alert(123);}),仍然可以click事件,不论你是已经加载完成。
2 可以使用 ajax的属性 async:false, 这样是 执行的ajax是同步的,就不会出现加载完成之后才绑定
如下jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>news</title> <script type="text/javascript" src="js/jquery.1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ // 声明所有的可能需要传递的参数 var pageSize=2; var pageNumber=1; var tid=0; var total=0; // 显示所有类型 $.ajax({ url:"showType", type:"post", async:false, success:function(data){ var result =""; for(var i=0;i<data.length; i++){ if(i==0){ result+="<span class='tab_title_class' style='color:red;' typeid='"+data[i].id+"'>"+data[i].name+"</span> "; tid=data[i].id; }else{ result+="<span class='tab_title_class' typeid='"+data[i].id+"'>"+data[i].name+"</span> "; } } $("#tab_title").html(result); } }); // 点击tab中标题时 $.ajax( async:false 表示同步的意思,ajax是一起顺序执行); // jquery1.7.2 live("事件名称",function(){}); 动态事件 // ajax 中没有 注明 属性async:false, 页面加载完成之后,假如你点击按钮绑定<span></span>的点击事件是不成功的 // 因为ajax是异步的,不能找到class属性了。这时可以使用jquery1.7.2 live("事件名称",function(){}); 动态事件 或者on事件 // 该事件 不受页面加载完成的影响,你后来点击按钮,仍然能够绑定相应的事件
$(".tab_title_class").live("click",function(){ alert(123); }) /* $(".tab_title_class").click(function(){ alert(123); });*/ </script> </head> <body> <div id="tab_title"></div> <div id="tab_content"></div> <div ><span id="show_more" style="cursor:pointer;">显示更多</span></div> </body> </html> |