jQuery delegate方法实现Ajax请求事件不丢失

给元素绑定click事件后 ,遇到一个问题:当执行一些ajax请求,再次调用此页面,里面的这个click事件就失效了

  比如说:我的分页是一个ajax请求 但我点下一页时 后生成的元素a就没有了click事件了

自己做项目时遇到的问题:

  批量删除复选框,当点击删除的时候出发jquery页面写的方法获取所有复选框的值,直接smarty注入调取页面时没问题,当根据条件查询(Ajax实现),再次调用页面列出记录时,单击事件失效

原因:ajax加载内容是在$(document).ready()之后的操作,这个时候给绑定函数的时候,找到的元素集合中还不包括ajax加载的内容,所以原来的没有问题,后加载的就没有绑定

解决办法:

1. 在ajax请求成功之后重新绑定事件
2. 用jquery的delegate(sel,[type],[data],fn)方法     live()方法已弃用

$(document).delegate(‘a‘, ‘click‘, function() { blah() })

指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

参数:

selector:选择器字符串,用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:传递到函数的额外数据

fn:当事件发生时运行的函数

$(function(){

$(‘#deleted‘).delegate("button",‘click‘,function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮  
checked = [];
$(‘input:checkbox:checked‘).each(function() {
checked.push($(this).val());
});
$(‘#getvalues‘).val(checked); //给隐藏域设置属性
})

})

完美解决问题,呵呵!

延伸:

在老版本的jQuery中,当需要对页面上某个由ajax加载的某片段的页面内容响应事件时,可以使用live函数来响应其事件,比如:$(‘a‘).live(‘click‘, function() { blah() });

在较新版本的jQuery中,live函数已经被弃用了,

弃用的原因可以参考:http://www.cnblogs.com/dumuqiao/archive/2011/09/09/2172511.html

那如何在新版本中实现live函数的功能呢,也就是当由ajax方式加载了页面片段后,这个页面片段中的内容如何响应相关的事件呢?

方法有好几种,本文只提供简单的两种:

  • 一种是直接导入jquery-migrate:https://github.com/jquery/jquery-migrate/,这样就能使live函数能够使用,但不对性能做优化。
  • 另一种是使用delegate函数来实现live的功能

    $(document).delegate(‘a‘, ‘click‘, function() { blah() });
时间: 2024-08-14 04:41:55

jQuery delegate方法实现Ajax请求事件不丢失的相关文章

js方法内Ajax请求数据判断,验证无效(OnClientClick="return Method();"),还是直接执行后台代码

function CheckAdd() { var flag = true; $.ajax({ cache: false, async: false, url: "/ajaxpage/getajax.aspx?t=adjserviceclientlist&Cellphone=" + Cellphone + "&a=" + Math.random(), dataType: 'json', success: function (data) { if (d

MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命名为:Mvc4JQueryAjaxDemo 2:新建控制器:在Controllers文件夹上 右键-->添加-->控制器,命名为:HomeController (HomeController .cs) 3:在控制器HomeController中新增Action: GetDate() 1 using

JQuery的delegate()方法支持的所有事件

$(document).delegate(".class_name", "mouseout", function () { $("#qrcode").hide();}); $(document).delegate("#id_name", "mouseout", function () { $("#qrcode").hide();}); $(document).delegate("

JQuery使用deferreds串行多个ajax请求

使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div> JS: function GetSomeDeferredStuff() { var deferreds = []; var i = 1; for (i = 1; i <= 10; i++) { var count = i; deferreds.push( $.post('/echo/html/',

jQuery(一)delegate() 方法

定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 语法 $(selector).delegate(childSelector,event,data,function) 参数 描述 childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空

Jquery(五)——AJAX应用篇

使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[callback]) 参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 例如,点击"加载"按钮时,向服务器请求加载一个指定页面的内容,加载成功后,将数据内容显示在<div>元素中,并将加载按钮变为不可用.如下图所示: 在浏览器中显

多个ajax请求下等待条显示和隐藏的简单处理

处理为遇到ajax请求就显示等待条,直到所有的ajax请求执行完毕才关闭等待条.比较简单,源码如下(基于jQuery) //基于jQuery //从第一个ajax请求发出开始显示等待条?直到一系列ajax请求全部结束才关闭等待条. //任何ajax触发了ajaxSend事件会显示等待框,所有的ajax都执行完成(ajaxComplete事件)才会关闭等待框 $(function(){ //需要监听的ajax的url var listenUrls = [], //等待条选择器 loadingSel

Ajax请求如何设置csrf_token

1. 方式一 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送. $.ajax({ url: "/cookie_ajax/", type: "POST", data: { "username": "yang", "password": 123, // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data总 "csrfmiddl

ajax请求时session已过期处理方案

web系统中常常使用拦截器或过滤器实现权限拦截,判断用户是否登陆,若未登陆,跳转到登陆页,但当浏览器发的是ajax请求时,浏览器不会正常跳转,而是返回登陆页的HTML源码给ajax回调函数(当跳转的登陆页跨域时,会出现302错误),解决方案如下: 前端: //如果session超时或未登陆,则跳转到登陆页 $(document).ajaxComplete(function(event,request, settings){ var data=request.responseJSON; if(da