jquery 1.7.2的 live/on事件 $.ajax的 async:false,

来源：互联网发布：魔兽争霸3mac怎么安装编辑：程序博客网时间：2024/06/09 22:52

说明：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>

$(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>

</body>

</html>

阅读全文

0 0