jQuery中delegate方法如何实现Ajax请求绑定事件不丢失详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中delegate方法如何实现Ajax请求绑定事件不丢失详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3082字，纯文字阅读大概需要5分钟。

内容图文

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

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

　　目的：批量删除复选框，当点击删除的时候触发利用jquery绑定在按钮上的onclick事件从而获取所有复选框的值，

　　1.第一次直接smarty注入调取页面时没问题，当根据条件查询(Ajax实现)，再次调用页面列出记录时，单击事件失效

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

最终解决办法：

1.利用jQuery的delegate()方法

2.利用原生js把获取复选框的值写入提交验证函数里，

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

　　有值，验证通过，把值赋给一个隐藏域value

　　无值，返回

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!='on'){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert('请选择要删除的记录');
           return false;
       }else{
           document.getElementById('getvalues').value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm('确定批量删除？');
       }

 

}

解决办法：

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

$(document).delegate('a', 'click', function() { blah() }) 解决绑定事件Ajax请求后不失效

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

使用 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函数已经被弃用了，

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

方法有好几种，本文只提供简单的两种：

• 一种是直接导入jquery-migrate这样就能使live函数能够使用，但不对性能做优化。

• 另一种是使用delegate函数来实现live的功能

• $(document).delegate('a', 'click', function() { blah() });

以上就是jQuery中delegate方法如何实现Ajax请求绑定事件不丢失详解的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jQuery中delegate方法如何实现Ajax请求绑定事件不丢失详解全部内容，希望文章能够帮你解决jQuery中delegate方法如何实现Ajax请求绑定事件不丢失详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端