zoukankan      html  css  js  c++  java
  • jQuery delegate方法实现Ajax请求绑定事件不丢失

    给元素绑定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!='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函数已经被弃用了,

    弃用的原因可以参考: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() });

  • 相关阅读:
    redis搭建集群并用TreeSoft管理
    使用windows任务计划程序自动清除C盘缓存文件
    深入理解JavaScript事件循环机制
    redux源码解读(二)
    redux源码解读(一)
    create-react-app源码解读之为什么不搞个山寨版的create-react-app呢?
    深入理解CSS系列(二):为什么height:100%不生效?
    深入理解CSS系列(一):理解CSS的盒子模型
    搭建一个交互式的前端构建环境.md
    实习这件小事(一位大四狗的前端实习经历)
  • 原文地址:https://www.cnblogs.com/jiechn/p/4208101.html
Copyright © 2011-2022 走看看