jquery changes the order of the Ready method calls, executes the JS code after ready

Source: Internet
Author: User

<title>jquery changes the order of the Ready method calls, executes the JS code after ready</title> jquery changes the order of the Ready method calls, executes the JS code after ready. Table of Contents
    • Problem description
    • Execute the above method after all the Ready methods
    • Overriding the $.fn.ready method
    • View $.fn.ready's Source definition
    • Modify your $.fn.ready
    • Closures for added security
Problem description

I want to control input, enter not submit the form, the idea is as follows:

$ (function () {    $ ("form input"). On ("KeyPress", function (event) {        if (Event.keycode = = +) {            return false;        }    })})

Of course, the above code is base.js (all the pages to introduce the basic function) inside, because there are many pages have this problem. The problem is that, in some pages, when the above code is executed, $ ("form input") does not yet exist, and these elements are in the page's $ ( function () {})-generated in (I call it the Ready method): So now there is a need to execute the above method after all the ready methods

Execute the above method after all the Ready methods

The Ready method for jquery is as follows:

$ (function () {//...});

Or

$ (document). Ready (function () {//...});

There are two methods of jquery, one is $.extend, and the other is \ (("button"). On (...), (defined as \). Fn.on) from the above analysis, the Ready method should belong to the second, so I intend to re-prepared method

Overriding the $.fn.ready method
    1. Easy test
$.fn.ready = function () {alert ("Hello,world");}

Put in the base.js, and found that all the pages are loaded, do not execute their own ready method, but pop up "Hello,world"

    1. Execute the Ready method in the page
$.fn.ready = function (func) {if (func) {   ///If you have your own Ready method, Func ();    Run the method}alert ("Hello,world");}

The result is that you have executed your own Ready method (in which you write an alert (1) as a test) and follow-up methods are performed: However, the page is not loaded, because everyone knows that the Ready method is executed when the page is loaded, and now when it is run to $ (function () {}) here, it executes without waiting for the page to load.

View $.fn.ready's Source definition

The source code is defined as follows:

JQuery.fn.ready = function (fn) {        //ADD The callback        jQuery.ready.promise (). Done (FN);        return this;};

JQuery uses deferred, promise, and so on to control the execution after loading is complete. The Done method can accept multiple functions.

Modify your $.fn.ready
JQuery.fn.ready = function (fn) {        //ADD The callback        jQuery.ready.promise (). Done (Fn,function () {        $ ("form Input "). On (" KeyPress ", function (event) {            if (Event.keycode = =) {                return false;            }        )    });        return this;};

Test, available, the order is to execute the FN (multiple ready methods on the page), and then execute their own method, and now that input has been created successfully, you can access the

Closures for added security

The final code is as follows:

(function ($) {        $.fn.ready = function (fn) {                $.ready.promise (). Done (Fn,function () {                        $ ("form input"). On (" KeyPress ", function (event) {                                if (Event.keycode = =) {                                        return false;                                }                        );                });                return this;        };}) (JQuery);

created:2016-05-04 Wednesday 17:48

Emacs 24.5.1 (ORG mode 8.2.10)

Validate

jquery changes the order of the Ready method calls, executes the JS code after ready

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.