jQuery如何重新绑定已经绑定的事件?虽然我们现在推荐行为分离,渐进增强,但在很多遗留系统里还是存在很多这样的代码
<input type="button" value="ClickMe" id="btn1" onclick="foo()" />
就是直接在DOM元素上绑定事件
这样做有很多缺点
1.代码高度耦合
2.增加HTML大小
3.书写不了逻辑性很强的代码
这种绑定事件的方法太丑陋了,我们看看jquery等框架是如何绑定事件的?
$("#btn1").click(function(){
foo();
});
当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办?
来看jquery如何巧妙的实现替换elements已绑定事件
("#btn1").unbind('click').removeAttr('onclick').click(function() {
alert('The method has invoked by Jquery.');
});
我们分析下核心代码
我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),
就能把onclick属性给去掉了
然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件
分享到:
相关推荐
其中`document`可以替换为任何包含目标元素的父级元素,`#dynamic-element-id`是目标元素的选择器,`function() {}`是事件触发时执行的回调函数。 5. 示例代码分析:文章中提供的代码展示了如何为动态生成的select...
例如,`$("#element").bind("click mouseover", function() {...})`将为指定元素同时绑定点击和鼠标悬停事件。当这个元素被点击或鼠标悬停时,关联的函数就会执行。这种方法使得我们可以在一个处理函数中处理多个...
本文将深入探讨如何使用jQuery来替换元素上的事件。 首先,我们来看一下提供的示例代码: ```html ; charset=utf-8" http-equiv="Content-Type" /> <title>TestPage ...
### Jquery节点插入、...综上所述,JQuery提供的这些插入、复制和替换的方法为开发者提供了极大的灵活性,使得DOM操作变得更加简单高效。无论是创建新的页面布局还是动态更新现有内容,这些方法都是必不可少的工具。
2. **事件绑定**:使用`$(element).on('event', function() {...})`可以绑定事件监听器,如`click`事件,当用户点击时触发图片切换。 3. **动画效果**:jQuery的`.fadeIn()`和`.fadeOut()`方法用于淡入淡出效果,`....
当一个可拖动元素被放置到可接收区域时,会触发一系列事件,如`drop`事件,开发者可以在此事件中处理逻辑,比如替换元素。例如: ```javascript $('#target').droppable({ drop: function(event, ui) { $(this)....
事件委托允许我们在父元素上绑定事件,而不是在每个子元素上单独绑定,这样即使子元素被替换,事件处理仍然有效。 ```javascript $(document).on('click', '.ajax-generated', function() { // 你的事件处理代码 }...
3. live()方法通过事件冒泡的方式绑定事件,它将事件绑定到document的DOM节点上,而非直接绑定在元素上。live()适用于动态添加到DOM中的元素,因为即使这些元素是在事件绑定之后添加的,它们依然可以响应事件。不过...
- `triggerHandler(eventObj)`:立即触发一个或多个绑定到匹配元素上的事件处理器,但不会改变元素的状态。 - **解除绑定**: - `off(event, [selector], [handler])`:移除一个或多个绑定到匹配元素上的事件...
2. **链式调用(Chaining)**:jQuery对象支持链式调用,一次操作后可以直接进行下一次操作,如`$("#element").hide().fadeIn()`,先隐藏元素,再淡入显示。 3. **DOM操作(DOM Manipulation)**:jQuery提供了丰富...
</p>")`将替换ID为"element"的元素内的内容。 3. **事件处理(Event Handling)**:jQuery简化了事件绑定和解绑的过程。`$("#button").click(function() {...})`会为ID为"button"的元素添加点击事件。`off()`可以...
在这个例子中,特效是通过jQuery实现的,当用户将鼠标移动到某个元素(如图片或按钮)上时,会出现上下切换的动作,同时伴随着图片和文字的互相替换。这可能是一种常见的轮播图或者信息展示方式,通过这种动态效果,...
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 <script type="text/javascript" src="/jquery/jquery.js"> $...
jQuery简化了事件绑定和解绑。使用`$(selector).on(eventName, handler)`可绑定事件,如`$("#myButton").on("click", function() {...})`监听点击事件。`off()`方法用于解绑事件,`$(selector).off(eventName, ...
3. **事件处理**:虽然比jQuery的事件系统简单,Selector仍然支持基本的事件绑定和解绑。例如,`Selector('#element').on('click', function() {})`用于绑定点击事件,`Selector('#element').off('click')`则可以...
例如,`.live()`方法被替换为`.on()`,因为它提供了更好的性能和更灵活的事件绑定。 8. **向后兼容性**:虽然1.9.1版本移除了部分旧API,但jQuery团队也同时发布了1.8.x版本以保持对旧代码的兼容。这允许开发者逐步...
6. **链式操作**:jQuery的一个显著特点是链式调用,允许连续执行多个方法在一个选择集上,如`$("#element").css("color", "red").slideUp(500);`。 7. **插件扩展**:jQuery生态系统庞大,拥有无数插件,如轮播图...
例如,`$(element).append(content)`在元素内部追加内容,`$(element).remove()`删除元素,`$(element).replaceWith(newContent)`替换元素,以及`$(selector).find(target)`在选定元素集中查找子元素。 3. **事件...
《jQuery中文API 2.2与1.83详解》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM...无论是在DOM操作、事件处理、动画效果还是Ajax通信上,jQuery都以其简洁的API和强大的功能赢得了开发者们的喜爱。