asp.net中ScriptManager自带Ajax与jQuery事件冲突
问题引诉：最近在使用asp.net自带的无刷新提交ScriptManager时，发现一个问题，就是和我自己用jQuery写的一些事件函数和局部刷新相冲突。通过在网上收索，发现很多人都遇到这个同样的问题。最终还是找到的解决的办法，在此我想将其解决的办法分享出来供大家参考。
问题解决办法：
方法1、两者实现都能够实现页面的无刷新效果，所以可以保留其中的一种即可；
方法2、如果必须要两者混合应用，那么在用jQuery绑定事件是就要注意一些了
我们平时在jQuery中绑定事件最常用的方式有以下三种：以click事件为例
（1）target.click(function(){});-----和纯js绑定事件没得什么区别
（2）target.bind("click",function(){});-----只绑定页面已经存在的控件
（3）target.live("click",function(){});------采用事件委托，把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上，这样新增加的元素可以通过事件冒泡被绑定上。
所以针对上面问题，只需要在绑定事件的时候使用target.live("click",function(){})方式即可（jQuery版本必须是在1.4及其以上）
下面简单说明一下jQuery通过bind和live两种方式绑定事件的区别
live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后生成的元素也可以绑定相应的事件。那么live方法的这个特性是怎么实现的呢？下面来探讨一下其实现原理。
live方法之所以能对后生成的元素也绑定相应的事件的原因归结在“事件委托”上面，所谓“事件委托”就是指绑定在祖先元素上的事件可以在其后代元素上进行使用。live方法的处理机制就是把事件绑定在DOM树的根节点上，而不是直接绑定在某个元素上。举一个例子来说明：
$(".clickMe").live("click",fn);
$("body").append("<div class='clickMe'>测试live方法的步骤</div>");
当我们点击这个新增的元素时会依次发生如下步骤：
（1）生成一个click事件，传递给div来做处理
（2）由于没有事件直接绑定在div上，所以事件直接冒泡到DOM树上
（3）事件不断冒泡，直到DOM树的根节点上，默认情况下，根节点上就绑定了这个click事件
（4）执行由live绑定的click事件
（5）检测绑定事件的对象是否存在，判断是否需要继续执行绑定的事件。检测事件对象是通过检测
$(event.target).closest('.clickMe') 能否找到匹配的元素来实现的。
（6）通过（5）的测试，如果绑定事件的对象存在的话，就执行绑定的事件。
由于只有在事件发生的时候，live方法才会去检测绑定事件的对象是否存在，所以live方法可以实现后来新增的元素也可实现事件的绑定。相比之下，bind会在事件在绑定阶段就会判断绑定事件的元素是否存在，而且只针对当前元素进行绑定，而不是绑定到父节点上。
想必到此，大家已经明白了上述问题产生的原因了吧，所以最好的解决的办法就是将其事件绑定方式修改一下即可！
下面是一个简单的例子：
<head runat="server">
<title></title>
<script src="Js/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".asa").live("click", function () {
alert(4);
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><asp:TextBox
ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" class="asa" value="danji" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
asp.net中ScriptManager自带Ajax与jQuery事件冲突的更多相关文章
- asp.net中的ListBox控件添加双击事件
问题:在Aspx页里的ListBox A中添加双击事件,将选中项添加到另一个ListBox B中,双击ListBox B中的选中项,删除当前选中项 页面: <asp:ListBox ID=&qu ...
- asp.net中TextBox里面实现回车触发指定事件
原文:asp.net中TextBox里面实现回车触发指定事件 我在一个user_top用户控件里面做了个包括搜索的功能.然后再一个页面中添加这个用户控件.浏览时候在textbox里面输入搜索内容后.下 ...
- ASP.Net中关于WebAPI与Ajax进行跨域数据交互时Cookies数据的传递
本文主要介绍了ASP.Net WebAPI与Ajax进行跨域数据交互时Cookies数据传递的相关知识.具有很好的参考价值.下面跟着小编一起来看下吧 前言 最近公司项目进行架构调整,由原来的三层架构改 ...
- ASP.NET中关于XML的AJAX的读取与删除
一个XML文件,名称就暂定为GroupStudents.xml吧,内容如下: <?xml version="1.0" encoding="utf-8"?& ...
- asp.net ajax与jquery的冲突问题解决
在网上看到有网友说,用了updatepannel这个asp.net ajax异步更新面板后,javascript或者jquery代码不起作用,实际上,可以在updatepannel的触发器中进行设置解 ...
- jQuery AJAX与jQuery事件的分析讲解
jQuery 本身即是为事件处理而特别设计的,jQuery 事件处理方法是 jQuery 中的核心函数. $(function() { ... }); 是如下格式的缩写: ? 1 $(document ...
- jQuery AJAX 与 jQuery 事件
jQuery 本身即是为事件处理而特别设计的,jQuery 事件处理方法是 jQuery 中的核心函数. $(function() { ... }); 是如下格式的缩写: $(document).re ...
- 【Asp.net入门3-04】使用jQuery-使用jQuery事件
- ASP.NET中的事件处理
一.ASP.NET中的事件主要支持3个主要的事件组:1.包含在asp.net生成页面时自动生成,我们使用这些事件建立页面(如page_load等)2.包含了用户与页面交互时发生的所有事件(这种最强大) ...
随机推荐
- 如何通过REST获取JENKINS的编译进度？
第二版功能需要实现, 我看了一下,获取百分比进度不太可能了,,因为JENKINS本身都没有具体的百分比进度.. 那,,只好实现获取实时值,如果完成就显示完成. URL: http://1.2.3.4/ ...
- LinkedHashMap和HashMap的比较使用 由于现在项目中用到了LinkedHashMap，并不是太熟悉就到网上搜了一下。 ? import java.util.HashMap; impo
LinkedHashMap和HashMap的比较使用 由于现在项目中用到了LinkedHashMap,并不是太熟悉就到网上搜了一下. import java.util.HashMap; import ...
- Android调用MediaScanner进行新产生的媒体文件扫描
有时候,我们拍了一张图片或录制了一段视频,图库应用默认没有将这些新产生的文件识别出来所以打开图库或视频播放器发现没有找到这些文件,需要调用MediaScanner扫描一下才会出来.从FFMPEG中找了 ...
- 最全的JAVA源码整合下载
http://www.360doc.com/content/14/0602/00/11407612_382890953.shtml http://www.360doc.com/content/14/0 ...
- hadoop多机安装YARN
hadoop伪分布安装称为测试环境安装,多机分布称为生成环境安装.以下安装没有进行HA(热备)和Federation(联邦).除非是性能需要,否则没必要安装Federation,HA可以一试,涉及到Z ...
- Unreachable catch block for IOException. This exception is never thrown from the try statement body
Unreachable catch block for IOException. This exception is never thrown from the try statement body ...
- saxReader的列子
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.xml.sax.Attributes; import org.x ...
- 两款.net 下编辑器小结
在asp.net 状态下,有两款不错的网页编辑器,分别是freetextbox和fckeditor,网上不少文章介绍之,现归纳之 1 freetextox 安装时引用freetexbox.d ...
- Base64上传图片
#region 上传图片 [HttpPost]/// <summary>/// 上传文件 jpg图片/// </summary>/// <param name=" ...
- Excel和XML文件导入
using System;using System.Collections;using System.Collections.Generic;using System.Configuration;us ...