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</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