jquery移除button的inline onclick事件(已测试及兼容浏览器)

inline onclick代码如下


代码如下:

<input type="button" id="btnOK" name="" value="确定" onclick="btnOKClick();" />

btnOKClick的代码


代码如下:

function btnOKClick() {
alert("btnOK Clicked");
}

现在要在点击按钮以后,移除onclick事件,并为按钮绑定一个新的click事件。在第二次点击时候,就开始执行第二个事件处理函数,第二个处理函数的代码:
reclick的代码


代码如下:

function reclick() {
alert('reclick');
}
[\s\S ]*\n

思路:在btnOKClick中移除onclick,然后添加新的绑定,代码如下:


代码如下:

$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });

加上这段代码后的btnOKClick方法如下:


代码如下:

function btnOKClick() {
alert("btnOK Clicked");
$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });
}

这种方法在Google Chrome下正常工作,但是在IE的兼容模式下会马上调用reclick方法,这不是我们想要的效果。

出现这种效果的原因貌似是因为onclick执行完了以后,IE回去查看是否有绑定在click上的handler,结构是有的,于是就马上执行了。

为了解决这个问题,我们可以换个思路,就是延迟绑定click事件。具体的代码如下:


代码如下:

function btnOKClick() {
alert("btnOK Clicked");
setTimeout(function () {
$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });
}, 1);
}

这里使用了setTimeout定时器,在定时器触发以后,才执行移除onclick属性,绑定click handler的代码。
经测试,在IE9的兼容模式和非兼容模式下都可以正常运行;Google Chrome也正常运行。

(0)

相关推荐

  • jQuery中click事件用法实例

    本文实例讲述了jQuery中click事件用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. 一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序. 可以通过click()方法为click事件绑定事件处理程序.例如: 复制代码 代码如下: $("button").click(function(){$("div").css("color",

  • jQuery为iframe的body添加click事件的实现代码

    html结构如下: 复制代码 代码如下: <html> <head> <title>为body添加click事件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="jquery-1.5.2.js&quo

  • jQuery中click事件的定义和用法

    本文实例讲述了jQuery中click事件的定义和用法.分享给大家供大家参考.具体分析如下: 当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件. click()方法也可以绑定事件处理方法. 语法结构一: 触发click事件. 复制代码 代码如下: $(selector).click() 语法结构二: 为click事件绑定事件处理方法. 复制代码 代码如下: $(selector).click(data,function) 参数列表: 参数 描述 d

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jquery 为a标签绑定click事件示例代码

    $(document).ready(function() { $("a[name='del']").click(function(){ Ext.Msg.confirm('提示','你确定要删除该公告吗?',function(button,text){ if(button=='yes'){ window.location.href="/admin/note!delete.action?id=${id}"; } }); }); $("a[class='del2

  • JQuery触发事件例如click

    复制代码 代码如下: $('#jquery_ulsjcuiwqljksadjaspcjxzkhl li:eq(0) a').trigger('click'); $('#bt).click();

  • jquery bind(click)传参让列表中每行绑定一个事件

    点击列表中某行,弹出详情的需求比较常见.用jquey bind 点击事件时,传参不注意可能会导致点击每一行都是显示相同内容的情况,这大多数是因为传参没注意引起的问题.简易代码如下: for(var i=0;i<2;i++) { $("#b" + i).bind("click", {'bindText':bindText + i}, function(e){ butClick(e); }); } 测试代码: <html> <head> &

  • jquery trigger伪造a标签的click事件取代window.open方法

    var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32">您已经成功发送好友申请.</div>'+ ' <p class="c999">上传真实头像,好友申请更容易被通过哦,赶紧上传头像吧!</p> '+ '<a href="<%=path%>/teacher/edit

  • JQuery 给元素绑定click事件多次执行的解决方法

    原绑定方法: $("#sdfsd").on("click",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jquery应该如何来设置改变按钮input的onclick事件

    jquery应该如何来设置按钮input的onclick事件?比如开始时有个按钮: <input id="prebt" type="button" value="上一页" onclick="ToPage(2)"/>这行代码是在程序后台生成的,和Discuz!NT论坛源码中的做法一样,页面上所有的东西连同脚本都是由后台代码生成..然后用jquery.ajax加载到页面上来..其他的除了ie8不能显示之外..其它浏览器

  • Jquery为单选框checkbox绑定单击click事件

    一.假设有如下一段html代码 复制代码 代码如下: <dd id="1"> <input id="checkbox-518" class="imagezz" name type="checkbox" value="518"> </dd> 选中事件(根据选中情况修改上一层背景): 复制代码 代码如下: var $test_image_check_box_click = f

随机推荐