`
joe_yee
  • 浏览: 9690 次
社区版块
存档分类
最新评论

浏览器对JQUERY多次绑定CLICK事件的影响

 
阅读更多

近期从同事手里接过来的项目,是用JQUERY来做的,以达到页面不刷新的效果.后来,发现前面做的有些页面还是没达到预期效果.特别是一些组件都没有抽取出来,于是,就开始抽取公用组件.

其中有一个分页组件,因为在点击分页按钮时,需要触发不同的请求事件,于是,就传入具体的事件:

myself.preBtn.click(function(){
			myself.configs.curPageNum = 1;
		});
		myself.preBtn.click(callback);
		myself.preBtn.click(function(){
			myself.configs.curPageNum = 1;
			myself.pageTxt.val(myself.configs.curPageNum);
			$(this).attr('disabled',true);
			myself.nextBtn.attr('disabled',false);
			myself.endBtn.attr('disabled',false);
		});

 这种方式在火狐上是没问题的,火狐浏览器按顺序逐个触发.但在IE上却是先触发myself.preBtn.click(callback);这样就导致分页出现问题.最后修改为:

myself.preBtn.click(function(){
			myself.configs.curPageNum = 1;
            if(callback)
                callback();
			myself.pageTxt.val(myself.configs.curPageNum);
			$(this).attr('disabled',true);
			myself.nextBtn.attr('disabled',false);
			myself.endBtn.attr('disabled',false);
		});

 

分享到:
评论

相关推荐

    jquery mobile的触控点击事件会多次触发问题的解决方法

    在代码示例中,我们可以通过jQuery绑定click事件到指定的DOM元素,例如id为"article"的div元素。在事件处理函数中,我们可以调用event.stopPropagation()方法来阻止事件冒泡,这有助于防止事件在DOM树上向上冒泡而...

    jQuery事件的绑定、触发、及监听方法简单说明

    1. 事件绑定:在jQuery中,绑定事件是通过选择器选中DOM元素后,使用.on()方法来绑定一个或多个事件处理器。推荐使用.on()而不是旧的语法糖方法,如click()等,因为.on()提供了更好的灵活性和兼容性。.on()方法可以...

    js创建一个input数组并绑定click事件的方法

    在JavaScript中,创建一个input数组并绑定click事件是常见的需求,尤其在动态生成或操作DOM元素时。这个过程包括获取页面上的input元素,将它们组织成数组,然后为每个元素添加点击事件监听器。以下是对这个主题的...

    jQuery中的时间与动画

    - **事件绑定**:jQuery提供了一系列方法来绑定事件,例如`click()`、`mouseover()`等。 - **`click()`**:当用户点击元素时触发。 - **`mouseover()`和`mouseout()`**:分别在鼠标进入和离开元素时触发。 - **`...

    第九课 jquery事件操作1

    `on()`方法的灵活性体现在它可以接收多个参数,如`childSelector`和`data`,使得我们可以对事件处理程序进行更复杂的设置,如事件委托和传递额外数据。例如,`$("div").on('click', ".btn1",{num:123}, function(e){...

    [jQuery入门到精通]第5章:事件与事件对象[收集].pdf

    相比直接通过`onclick`属性设置,jQuery的`.on()`方法允许同时绑定多个事件处理函数,并支持事件委托,即在一个父元素上监听事件,根据事件源来决定执行哪个子元素的处理函数。 事件委托在处理动态添加的元素时尤其...

    js事件绑定机制1

    使用`$('element').on('click', function (argument) {})`则是jQuery推荐的事件绑定方式。它不仅支持绑定多种类型的事件,还能添加多个事件处理器。这种方法通过`on`方法的事件名称参数来指定要监听的事件类型,...

    jQuery 1.9.1源码分析系列(十)事件系统之绑定事件

    如果多次绑定,将会覆盖前面的绑定。比如: ```javascript elem.click = function() { // 事件处理代码 }; ``` 在jQuery中,我们同样可以使用类似的语法,如`$("#chua").click(fn);`。但是,jQuery中的实现是通过...

    javascrpt绑定事件之匿名函数无法解除绑定问题.docx

    1. **性能考虑**:频繁地绑定和解除绑定可能会对性能造成一定影响,尤其是在高性能要求的应用场景中。 2. **可维护性**:通过这种方式管理事件处理程序会使得代码变得较为复杂,特别是在大型项目中。考虑使用更高级...

    jquery多页签tab翻滚切换

    "jquery多页签tab翻滚切换"就是一个专注于改善页面导航功能的实践案例。jQuery库以其简洁API和强大的功能,成为了JavaScript开发者的首选工具之一,尤其是在实现动态交互效果时。在这个项目中,开发者巧妙地利用了...

    jQuery toggle事件制作FAQ列表页.zip

    9. **浏览器兼容性**:虽然jQuery已经处理了很多跨浏览器的问题,但在实际应用中仍需关注对旧版浏览器的支持,确保所有核心功能在所有目标浏览器中都能正常工作。 10. **测试与调试**:开发过程中,需要进行充分的...

    jQuery1.8_jQuery·框架_

    `on()`方法可以一次绑定多个事件,甚至可以对未创建的元素进行事件绑定,提高了代码的灵活性。 ```javascript $(document).on('click', '#myElement', function() { // 事件处理代码 }); ``` ### 三、动画与效果 ...

    jQuery/jquery-1.5.1.min.js /jquery-1.7.2.min.js等

    - **jquery-1.7.2.min.js**:这个版本进一步优化了DOM操作和事件处理,引入了`.on()`方法,可以一次性绑定多个事件,并支持事件委托。此外,它增强了动画效果的性能,并对API进行了一些调整,使其更符合当前的开发...

    jquery手册(jquery.cuishifeng.cn网页版)2

    9. **兼容性**: jQuery致力于浏览器兼容性,使得开发者可以编写一次代码,应用于多种浏览器,降低了跨平台开发的难度。 10. **性能优化**: 使用`$(document).ready()`确保DOM加载完成后执行脚本,减少DOM操作以提高...

    JQuery英文经典书籍

    使用`.on()`方法,你可以一次性绑定多个事件,如`$("#element").on("click mouseover", function() {...})`。此外,还有`.click()`, `.mouseover()`, `.mouseout()`等便捷的方法。 4. **动画效果**:jQuery的`....

    jquery移除、绑定、触发元素事件使用示例详解

    `.triggerHandler()` 方法类似 `.trigger()`,但只触发绑定的事件处理程序,不会执行浏览器默认的行为。 ```javascript $("input").triggerHandler("focus"); // 只触发绑定的焦点事件处理程序 ``` 对于需要解除...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    同时,`on()`方法可以用于一次性绑定多个事件,提高了代码的可维护性。 4. **动画效果(Animation)** jQuery的`animate()`函数允许开发者创建自定义的动画效果,通过指定CSS属性的变化来实现平滑过渡。另外,`....

    jquery多图tab标签切换焦点图

    3. **jQuery绑定事件**:利用jQuery的`click`事件监听tab标签,当用户点击某个tab时,触发相应的回调函数。 4. **切换逻辑**:在回调函数中,根据点击的tab,改变图片的显示状态,比如通过`fadeIn`和`fadeOut`实现...

    JQuery各大版本jar包

    从1.5版本到3.21版本,JQuery经历了多次迭代,每次更新都旨在提高性能、增强功能并修复已知问题。在本压缩包中,你将找到这些不同版本的JQuery jar包,这对于开发者来说是宝贵的资源,可以方便地在项目中选择适合的...

    jquery-3.3.1.zip

    3. **事件处理**:使用jQuery,绑定事件变得简单,如`click()`、`change()`等。同时,`event.preventDefault()`和`event.stopPropagation()`提供了更灵活的事件控制。 4. **动画效果**:jQuery 的`fadeIn()`, `...

Global site tag (gtag.js) - Google Analytics