登录  /  注册
首页 > web前端 > js教程 > 正文

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

黄舟
发布: 2017-06-26 10:12:14
原创
1340人浏览过

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

  比如说:我的分页是一个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!=&#39;on&#39;){                   给全选按钮value设置为on  排除此选项
                       compatibility += value + ",";           拼接字符串
                   }}

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

 

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

 

}
登录后复制

解决办法:

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

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

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

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

参数:

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

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

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

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

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

完美解决问题,呵呵!

延伸:

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

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

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

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

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

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

  • $(document).delegate(&#39;a&#39;, &#39;click&#39;, function() { blah() });
    登录后复制

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号