Jquery removes the button's inline onclick event (tested and compatible with browsers)

Source: Internet
Author: User

Inline onclickCodeAs follows::

Copy code The Code is as follows: <input type = "button" id = "btnok" name = "" value = "OK" onclick = "btnokclick ();"/>

Btnokclick code:Copy codeThe Code is as follows: function btnokclick (){
Alert ("btnok clicked ");
}

Now, after clicking the button, remove the onclick event and bind a new click event to the button. At the second click, the second event processing function is executed, and the code of the second processing function is as follows:
Reclick code:Copy codeThe Code is as follows: function reclick (){
Alert ('reclick ');
}
[\ S] * \ n

Ideas: Remove onclick from btnokclick and add a new binding. The Code is as follows:Copy codeThe Code is as follows: $ ('# btnok'). ATTR ('onclick', ''). BIND ('click', function () {reclick ();});

The btnokclick method after this code is added is as follows:Copy codeThe Code is as follows: function btnokclick (){
Alert ("btnok clicked ");
$ ('# Btnok'). ATTR ('onclick', ''). BIND ('click', function () {reclick ();});
}

This method works normally in Google Chrome, but the reclick method will be called immediately in IE compatibility mode, which is not the expected effect.

The reason for this effect seems to be that after the onclick operation is complete, ie goes back to check whether there is a handler bound to the click, and the structure is yes, so it will be executed immediately.

In order to solve this problem, we can change our mind to delay the binding of click events. The specific code is as follows:Copy codeThe Code is as follows: function btnokclick (){
Alert ("btnok clicked ");
SetTimeout (function (){
$ ('# Btnok'). ATTR ('onclick', ''). BIND ('click', function () {reclick ();});
}, 1 );
}

the setTimeout timer is used here. After the timer is triggered, The onclick attribute is removed and the code bound to the click handler is executed.
after testing, both the compatible and incompatible modes of ie9 can run normally, and Google Chrome can also run normally.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.