jQuery的绑定事件非常方便,有bind、unbind、live、one,还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要
$("#testButton").click(function() {
alert("I'm Test Button");
});
详细的可以参考我写过的jQuery事件机制和jquery如何绑定事件这两篇文章
如果我们要取消绑定的事件?jQuery有unbind的方法,专门用来取消绑定的事件
$("#testButton").unbind("click");
是不是很简单?如果你的click有2个事件的话,你还可以使用unbind("click", fnName)来删除特定函数的绑定。
为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javaScript的事件,跟C#的事件一样,事件的绑定是叠加(+=) 而不是覆盖。
var Eat = function() {
alert("我要吃饭");
}
var PayMoney = function() {
alert("先付钱");
}
jQuery(document).ready(function() {
$("#testButton").click(Eat);
$("#testButton").bind("click", PayMoney);
});
我们发现会先弹出:“我要吃饭”紧接着会弹出“先付钱”
要取消绑定特定函数的话:
$("#testButton").unbind("click", PayMoney);
注意,jQuery的unbind方法只能取消jquery bind()方法绑定的事件,
在jQuery的源码中我们可以看到$().click最后还是调用了$().bind("click")事件,所以只要是jQuery添加的事件,unbind就能解除事件绑定.对于这种原生JS添加的事件或者其他JS框架添加的事件,unbind就无能为力了
<input id="testButton" type="button" value="Test Button" onclick="Eat();" />
<script type="text/javascript">
jQuery(document).ready(function() {
$("#testButton").unbind("click", Eat);
$("#testButton").unbind();
$("#testButton").bind("click", PayMoney);
});
</script>
大家猜猜,会显示什么?吃饭?付钱?答案是Eat -> PayMoney,啊!!!我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢?
仔细一看有个
onclick="Eat();"
unbind函数如何解决这个问题?大家去看下这篇文章jQuery替换element元素上已经绑定的事件
分享到:
相关推荐
jQuery的`unbind`方法是用来解除元素上通过jQuery绑定的事件处理程序的。它是一个非常实用的工具,特别是在需要动态管理事件绑定的时候。然而,需要注意的是,`unbind`并不适用于那些通过原生JavaScript(如`...
本文实例讲述了jQuery unbind()方法使用方法。分享给大家供大家参考,具体如下: jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件。 语法结构: 复制代码 代码如下:unbind...
### JQuery 常用函数及功能详解 #### 一、文档加载完成执行函数 在Web开发中,确保脚本在页面完全加载后再执行是至关重要的。`$(document).ready()` 函数提供了一种简单有效的方法来实现这一点。 **示例代码**: ``...
如果需要移除特定函数的绑定,可以将这个函数作为第二个参数传递给unbind()方法,如示例中的“$("p").unbind("click",foo);”,这条语句将会移除之前绑定到段落元素的点击事件处理器foo。 使用unbind()方法需要注意...
jQuery简化了许多原生JavaScript操作,如$.extend()用于合并对象,$.noop()定义空函数,$.proxy()用于改变函数的作用域。此外,还涉及到了事件处理,如$.on()和$.off(),以及$.is()和$.not()等条件判断方法。 **第...
6. **Ajax交互**:`.ajax()`是jQuery的核心Ajax函数,可以实现异步数据交换。例如,`$.ajax({url: "test.php", type: "GET", success: function(data) {...}})`。 **二、jQuery API详解** jQuery 1.4版本的API提供...
### JQuery详解:jQuery的bind方法 #### 一、概述 jQuery 的 `bind()` 方法是用于在元素上绑定事件处理程序的一种方式。与原生 JavaScript 的事件绑定相比,`bind()` 提供了更多灵活性和便捷性。它允许开发者指定...
### jQuery绑定事件监听bind()与移除事件监听unbind()用法详解 #### 1. jQuery事件监听概念 在网页设计中,事件监听是一种常见的需求,主要作用是当用户与网页上的元素发生交互时,能够触发特定的代码执行,响应...
四、jQuery 1.2.6的函数详解 1. `$()`:这是jQuery的入口函数,用于选取DOM元素或创建新的jQuery对象。 2. `.each()`:遍历jQuery对象集合,执行指定函数。 3. `.css()`:设置或获取元素的CSS属性。 4. `.attr()`/`....
### jQuery函数知识点详解 #### 一、文档就绪与初始化 在jQuery中,`$(document).ready()`函数是一个核心概念,用于确保在执行任何脚本前,整个HTML文档已完全加载并可操作。例如: ```javascript $(document)....
**jQuery 1.4.js 和 jQuery 1.4 API 知识点详解** jQuery 是一个高效、简洁且功能丰富的 JavaScript 库,它极大地简化了HTML文档遍历、事件处理、动画设计以及AJAX交互。jQuery 1.4 版本是这个库的一个里程碑,它在...
《jQuery Hotkeys插件详解与应用实践》 在网页开发中,为了提升用户体验,开发者往往会引入各种JavaScript库来实现丰富的交互功能。其中,jQuery作为一款广泛使用的JavaScript库,以其简洁的API和强大的功能深受...
《jQuery API 学习类库详解》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。它以其简洁易用的API(应用程序接口)闻名,使得开发者能够高效地编写...
**jQuery 1.5.1框架详解** jQuery是一款高效、简洁、易用的JavaScript库,它极大地简化了JavaScript编程,让网页DOM操作、事件处理、动画设计和Ajax交互变得更加便捷。在给定的压缩包中,包含两个文件:`jquery-...
《jQuery经典Demo详解:探索30个精彩实例》 jQuery,作为一款强大的JavaScript库,以其简洁的API和高效的功能,深受Web开发者的喜爱。这里我们聚焦于30个经典的jQuery Demo,它们涵盖了从基础交互到复杂动画的各种...
jQuery的事件处理函数接收一个`event`参数,可以利用这个参数来控制事件行为: - `event.stopPropagation()`: 阻止事件继续向父元素冒泡,防止父元素上的事件处理函数被执行。 - `event.preventDefault()`: 阻止...
2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容过滤选择器/25 2.2.5 可见性过滤选择器/27 2.2.6 属性过滤选择器/28 2.2.7 子元素过滤选择器/30 ...