On binding events in jquery

Tag elements that were created dynamically in the previous project are not valid at the time of binding the event, and cannot be triggered anyway.

Eg: <div> elements that are dynamically created by the script after the page has been loaded, such as the Click event when binding an event

$ ("div"). Click (function(alert ("AAA")) {});

Then the dynamically created element is not triggering this event.

This is going to use on to bind the event.

But in the world of the world not on the event only live,delegate this is because the update is not timely, it is recommended to go to http://www.runoob.com (rookie tutorial) study, but the personal feeling rookie on the small error more.

Definition and usage of on:

The on () method adds one or more event handlers on the selected element and child elements.

Since JQuery version 1.7, the On () method is a new alternative to the Bind (), Live (), and Delegate () methods. This approach brings a lot of convenience to the API, and we recommend using this approach, which simplifies the JQuery code base.

Note: the event handlers added using the on () method apply to current and future elements (such as new elements created by the script). However, the on event is a new addition after 1.9 if you are referencing a version of 1.9 or using live and delegate to bind the event.

I tried it myself. Adding events to future elements after 1.9 use on does not trigger later use of live before the test bar using 1.9 can be triggered.

Tip: If you want to remove an event handler, use the off () method. All off is also seen after 1.9.

tip: To add an event that runs only once and then remove it, use the one () method.

Additional: Click,bind ("click"), the difference between the live,delegate:

1. Click () and bind ()

1). Click ()

In the Jqeury event processing API, bind () is the base of its API. Click (), MouseOver (), mousermove, etc. to handle the event, the real function is bind (). These methods are only auxiliary (alias functions), simplifying use. They all have only one parameter (the callback function that executes when the event is triggered).

2). Bind ()

Bind () can better control the processing in the event handler, and it can bind multiple events at once (event name as the first argument, multiple events separated by spaces, Eg:bind (' Click Contains ', function () {}) mouse left and right click event)

All practical bind () or click (), Mouserover () bound events can be unbound using the Unbind () method

2. Live ()

is basically the same as the bind () function.

The most important difference: Live () can bind events to current and future elements (eg: Bind a id=zy element to a point-and-click event, and when you dynamically generate a node with JS and insert it into the DOM document structure, if you are bound with bind (), How the newly inserted node will not have the bind binding event. and live () is possible);

Disadvantage: cannot be used for chained structures.

Eg: $ ('. class '). Live (' click ', Function () {}) correct notation

$ ('. class '). "Find (' span ')." Live (' click ', Function () {}) Error notation invalid

Live () bound events can be unbound using the Die () method.

3, Delegate ()

It works the same as Live (), but solves the live disadvantage. It solves the live problem by using the context in the selector as the first parameter (that is, delegate the first parameter you can use as a selection element).

eg. $ ('. class '). Delegate (' Span ', ' mouseover ', Fucntion () {}) binds the MouseOver event to all span tags under class-class elements.

Events bound by delegate () can be unbound by the Undelegate () method of the handler function.

Ps:bind,delegate,live can bind multiple events, with the same effect for multiple events:

function () {     $ ("#aa"). After ("<span>aaa </sapn>")});

Trigger different effects:

$ ("div"). Bind ({       click:function() {alert (1)},       mouseout:function() { Alert (2)}});

On binding events in jquery