`
zyn_cool
  • 浏览: 27682 次
  • 性别: Icon_minigender_2
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery替换element元素上已经绑定的事件

阅读更多
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事件
分享到:
评论

相关推荐

    jQuery为动态生成的select元素添加事件的方法

    其中`document`可以替换为任何包含目标元素的父级元素,`#dynamic-element-id`是目标元素的选择器,`function() {}`是事件触发时执行的回调函数。 5. 示例代码分析:文章中提供的代码展示了如何为动态生成的select...

    锋利的jquery第四章例子

    例如,`$("#element").bind("click mouseover", function() {...})`将为指定元素同时绑定点击和鼠标悬停事件。当这个元素被点击或鼠标悬停时,关联的函数就会执行。这种方法使得我们可以在一个处理函数中处理多个...

    Jquery替换已存在于element上的event的方法

    本文将深入探讨如何使用jQuery来替换元素上的事件。 首先,我们来看一下提供的示例代码: ```html ; charset=utf-8" http-equiv="Content-Type" /&gt; &lt;title&gt;TestPage ...

    Jquery节点插入、复制和替换方法

    ### Jquery节点插入、...综上所述,JQuery提供的这些插入、复制和替换的方法为开发者提供了极大的灵活性,使得DOM操作变得更加简单高效。无论是创建新的页面布局还是动态更新现有内容,这些方法都是必不可少的工具。

    jquery写的html有过渡效果的图片浏览

    2. **事件绑定**:使用`$(element).on('event', function() {...})`可以绑定事件监听器,如`click`事件,当用户点击时触发图片切换。 3. **动画效果**:jQuery的`.fadeIn()`和`.fadeOut()`方法用于淡入淡出效果,`....

    jQuery拖拽替换效果.zip_drop_forgetxbl_tidewad_web开发

    当一个可拖动元素被放置到可接收区域时,会触发一系列事件,如`drop`事件,开发者可以在此事件中处理逻辑,比如替换元素。例如: ```javascript $('#target').droppable({ drop: function(event, ui) { $(this)....

    jquery .ajax 局部刷新之后 js无法调用问题解决

    事件委托允许我们在父元素上绑定事件,而不是在每个子元素上单独绑定,这样即使子元素被替换,事件处理仍然有效。 ```javascript $(document).on('click', '.ajax-generated', function() { // 你的事件处理代码 }...

    深入理解jQuery事件绑定

    3. live()方法通过事件冒泡的方式绑定事件,它将事件绑定到document的DOM节点上,而非直接绑定在元素上。live()适用于动态添加到DOM中的元素,因为即使这些元素是在事件绑定之后添加的,它们依然可以响应事件。不过...

    jquery基础教程(jquery in action)

    - `triggerHandler(eventObj)`:立即触发一个或多个绑定到匹配元素上的事件处理器,但不会改变元素的状态。 - **解除绑定**: - `off(event, [selector], [handler])`:移除一个或多个绑定到匹配元素上的事件...

    jquery+jquery api

    2. **链式调用(Chaining)**:jQuery对象支持链式调用,一次操作后可以直接进行下一次操作,如`$("#element").hide().fadeIn()`,先隐藏元素,再淡入显示。 3. **DOM操作(DOM Manipulation)**:jQuery提供了丰富...

    jquery1.10.2

    &lt;/p&gt;")`将替换ID为"element"的元素内的内容。 3. **事件处理(Event Handling)**:jQuery简化了事件绑定和解绑的过程。`$("#button").click(function() {...})`会为ID为"button"的元素添加点击事件。`off()`可以...

    金山云jquery鼠标滑过上下切换

    在这个例子中,特效是通过jQuery实现的,当用户将鼠标移动到某个元素(如图片或按钮)上时,会出现上下切换的动作,同时伴随着图片和文字的互相替换。这可能是一种常见的轮播图或者信息展示方式,通过这种动态效果,...

    jQuery详细教程

    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; $...

    jquery帮助文档解析

    jQuery简化了事件绑定和解绑。使用`$(selector).on(eventName, handler)`可绑定事件,如`$("#myButton").on("click", function() {...})`监听点击事件。`off()`方法用于解绑事件,`$(selector).off(eventName, ...

    Selector一个用于替换jQuery的微型JavaScript库

    3. **事件处理**:虽然比jQuery的事件系统简单,Selector仍然支持基本的事件绑定和解绑。例如,`Selector('#element').on('click', function() {})`用于绑定点击事件,`Selector('#element').off('click')`则可以...

    jquery-1.9.1 jQuery最新版

    例如,`.live()`方法被替换为`.on()`,因为它提供了更好的性能和更灵活的事件绑定。 8. **向后兼容性**:虽然1.9.1版本移除了部分旧API,但jQuery团队也同时发布了1.8.x版本以保持对旧代码的兼容。这允许开发者逐步...

    jquery所有经典例子

    6. **链式操作**:jQuery的一个显著特点是链式调用,允许连续执行多个方法在一个选择集上,如`$("#element").css("color", "red").slideUp(500);`。 7. **插件扩展**:jQuery生态系统庞大,拥有无数插件,如轮播图...

    jQuery最新api.3.2.1.chm文档

    例如,`$(element).append(content)`在元素内部追加内容,`$(element).remove()`删除元素,`$(element).replaceWith(newContent)`替换元素,以及`$(selector).find(target)`在选定元素集中查找子元素。 3. **事件...

    列表li上下交换位置动画

    jQuery提供了便捷的选择器和事件绑定方法,例如`$(selector).click(function)`。 例如,我们可以这样设置HTML结构: ```html &lt;li class="item"&gt;Item 1 &lt;li class="item"&gt;Item 2 &lt;li class="item"&gt;Item 3 &lt;!--...

Global site tag (gtag.js) - Google Analytics