Ajax局部更新导致JS事件重复触发问题的解决方法

如果在页面中包含一个ajax更新的列表，那么需要小心非动态更新部分的事件处理。

以带有公共工具栏的列表界面为例：

| Menu1 | Menu2

----------------------------------------------------------------------------

ID TITLE DESCRIPTION OPERATION

1 test1 hey test X - ...

2 test2 why not X - ...

----------------------------------------------------------------------------

$.ajax(
....
data: { ...
},
success: function(data) {
$('Menu1').click(
function(){
//do something
}
);
}
)

由于Menu1界面部分是公共的，并不会随着列表数据的更新而被重新载入，那么上面的代码将产生重复的click事件触发（在多次更新列表后）。

所以我们要注意，在ajax列表更新的结果处理中，不能包含工具栏事件侦听的重新初始化。

赞 (0)

相关推荐

  • AJAX避免用户重复提交请求实现方案

    在使用AJAX(jQuery)异步请求数据时,为了避免因某些原因用户同时多次点击按钮,提交重复的请求,我们需要禁用请求提交按钮. 重点:jQuery的 attr 和 removeAttr 两个函数,主要是元素button的disabled属性. Demo: 复制代码 代码如下: <body> <a class="disabled">Button disabeld</a>    <a class="abled">Butt

  • JS Ajax请求如何防止重复提交

    好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说,还容易忘记做这个,同时,ajax也不好处理,需要提交失败的话同时返回新的token值. 所以我想在,js这边动手.其实以前和前端提过,久久不见动静,就只好弄块砖丢出去了.思路是,覆盖掉$.ajax,在这里面处理掉防止重复提交的问题,而前端的业务开发不受影响,不改代码,无感知. 我想架构的目的之一,

  • 防止重复发送Ajax请求的解决方案

    在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

  • Ajax校验是否重复的实现代码

    直接贴代码! 一.controller层: @ResponseBody @RequestMapping("entityFindByCode") public String entityFindByCode(Entity bean, HttpSession httpSession, Model m,HttpServletResponse res) throws IOException{ res.setContentType("text/plain; charset=UTF-8&

  • jQuery validate插件实现ajax验证重复的2种方法

    本文实例讲述了jQuery validate插件实现ajax验证重复的2种方法.分享给大家供大家参考,具体如下: jquery validate 经过这种多年的改良,已经很完善了.它能满足80%的验证需要,如果validate自带的功能,不能满足我们需求,它提供了addMethod来扩展功能.下面就举个小例子来说明一下addMethod的用法. 完整demo实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//

  • jQuery的 $.ajax防止重复提交的两种方法(推荐)

    下面给大家带来两种关于jquery 的ajax防止重复提交的解决方法,具体介绍如下所示: 1.第一种,对于onclick事件触发的的ajax 可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shopping&a=ajaxSubmitorder&sid='+sid+'&src='+src, cache:false, dataType: 'json', data: {'

  • 防止ajax重复请求的方法(GET和POST)

    复制代码 代码如下: /* 防止ajax重复请求的GET和POST方法 */ jQuery.extend({ getx:function(url,data,callback,sender){ var params={url:url,data:null,callback:null,sender:null}; for(var i=1;i<arguments.length;i++){ if(arguments[i]!=null){ var ptype=typeof(arguments[i]); if(

  • Ajax局部更新导致JS事件重复触发问题的解决方法

    如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------

  • jquery事件重复绑定的快速解决方法

    一 $.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. 复制代码 代码如下: //先通过die()方法解除,再通过live()绑定$("#selectAll").die().live("click",function(){//事件运行代码}); 二 click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件

  • 今win10更新导致VMware workstation pro无法打开的解决方法

    今天晚上吃完饭回来打开笔记本的时候就遇到问题了,一般睡眠的机子按回车或者启动键就可以正常进入桌面了,但是今天很奇怪久久打不开桌面,然后只能无奈长按重启,然后就配置更新了,起先不知道为什么明明关了系统更新还是会继续系统更新.最无奈的是打开后其实桌面正常,但是当我随后打开VMware的时候系统弹出对话框:Windows 不支持VMware Workstation Pro...... 这样一段文字,我当下觉得可能是我之前在任务管理器中关闭了一些和VMware的相关进程,从而导致VMware崩溃了,于是

  • 使用Ajax局部更新Razor页面的实例代码

    使用Ajax局部更新Razor页面的实例代码

    Razor功能非常强大,但是本身并不能做到无刷新,所以需要配合ajax使用 本文就做一个简单例子,实现Razor配合ajax做到局部刷新. 首先,我们创建一个MVC项目 让我们创建一个简单的Controller Book 然后对其添加一个视图,并且添加上一些简单的Html代码 @{ ViewBag.Title = "Index"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • jquery ajax多次请求数据时 不刷新问题的解决方法

    jquery的ajax在频繁请求数据,或者重复请求数据的时候出现了一个情况,那就是非ie浏览器正常,ie浏览器会设置缓存,导致第二次请求的时候不会刷新,系统报304 not modify, 解决方案: jquery的ajax方法提供配置参数:cache,(只需将属性设置为false即可) 详细: cache:Boolean 默认: true, dataType为"script"和"jsonp"时默认为false如果设置为 false ,浏览器将不缓存此页面. 以上就

  • js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码 代码如下: <style>  #name  {      display:none;  } </style> </head> <body> &l

  • C++多重继承引发的重复调用问题与解决方法

    本文实例讲述了C++多重继承引发的重复调用问题与解决方法.分享给大家供大家参考,具体如下: 前面简单介绍了一个C++多重继承功能示例,这里再来分析一个多重继承引发的重复调用问题,先来看看问题代码: #include "stdafx.h" #include<stdlib.h> #include<iostream> using namespace std; class R//祖先类 { private: int r; public: R(int x = 0):r(x

  • 基于bootstrap-datetimepicker.js不支持IE8的快速解决方法

    实例如下: if (!Array.prototype.indexOf) Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len;

随机推荐