Objective
In the development of the project, the use of jquery is extremely broad, if the mind does not have a bit of jquery basic knowledge, with the writing, then it is possible to create a bug problem. After the JQuery 1.4 version added the on method, this used more, for this I specifically made a summary, the need for the partners can take a good look at this article. The on method is specifically used to handle the event delegation mechanism, in general, to solve the problem that the event cannot bind to the newly added element after you Ajax or Pjax, and many of the bug problems in jquery are also present here.
Demand analysis
1, solve the Ajax or pjax caused by the failure of the Click event.
Effect chart
1, when the first click CheckBox when the bulk Delete button can be displayed normally, but in Ajax or Pjax after the show.
1.1, display
Deep understanding of the On method in jquery (event delegation mechanism)
1.2, do not show
Deep understanding of the On method in jquery (event delegation mechanism)
Previous Code
1, direct input[name= "selection[]"] Point click Bind Point Click Event.
At this point, when the first click CheckBox, the Bulk Delete button can be displayed normally, but after Ajax or Pjax will not be able to display.
/**
* Bulk Delete hidden display button
**/
$ (' input[name= ' selection[] "]". Click (function (e) {
& nbsp; keys_str = has_selected ();
if (keys_str = = ") {
$ (' #remove-all '). Fadeout ( );
}else{
$ (' #remove-all '). FadeIn ();
}
});
$ (' input[name= "Selection_all"]). Click (function (e) {
keys_str = Has_ Selected ();
if (keys_str = = ") {
$ (' #remove-all '). FadeIn () ;
}else{
$ (' #remove-all '). fadeout ();
}
});
function has_selected () {
var keys= new Array ();
var keys_str = ';
$ (' input[name= ' selection[] ']:checked '). each (function () {
Keys.push ($ (this). Val ());
});
Keys_str = Keys.join (', ');
return keys_str;
}
Modified Code
1, use on () to bind the event to document. (In fact, the document can also be replaced with the body or other Ajax or Pjax after the output page elements are all right, document is only standard)
Problem solving, after Ajax or Pjax, click the checkbox Batch Delete button can also be displayed normally.
/**
* The bulk delete hidden display button
**/
$ (document). On (' Click ', ' input[name= ' selection[] ', function (e) {
keys_str = has_selected ();
if (keys_str = = ") {
$ (' #remove-all '). Fadeout ( );
}else{
$ (' #remove-all '). FadeIn ();
}
});
$ (document). On (' Click ', ' input[name= ' selection_all '] ', function (e) {
keys_str = Has_ Selected ();
if (keys_str = = ") {
$ (' #remove-all '). FadeIn () ;
}else{
$ (' #remove-all '). fadeout ();
}
});
function has_selected () {
var keys= new Array ();
var keys_str = ';
$ (' input[name= ' selection[] ']:checked '). each (function () {
Keys.push ($ (this). Val ());
});
Keys_str = Keys.join (', ');
return keys_str;
}
Analysis and summary
jquery started with 1.7, introducing a completely new event binding mechanism, on () and off () two functions to handle event bindings uniformly. Because prior to this there are bind (), Live (), delegate (), and so on to handle event bindings, jquery considers the decision to introduce new functions to unify the event binding method and replace the previous method from performance optimization and approach unification.
On (EVENTS,[SELECTOR],[DATA],FN)
Events: One or more space-delimited event types and optional namespaces, such as "click" or "Keydown.myplugin".
Selector: A selector string is used for the descendants of the selector element of the filter's triggering event. If the selector is NULL or omitted, when it reaches the selected element, the event is always triggered.
Data: To pass Event.data to the event handler when an event is triggered.
fn: The function to execute when the event is triggered. The value of false can also be abbreviated as a function, returning false.
Replace bind ()
When the second argument ' selector ' is null, on () and bind () are virtually indistinguishable in usage, so we can assume that on () is only an optional ' selector ' argument over bind (), so on () You can easily replace bind ().
Replace Live ()
Before 1.4, it was believed that you liked to use Live (), because it can bind events to current and later added elements, of course, after 1.4 delegate () can do similar things. The principle of live () is simple, it is the event delegation through document, so we can also use on () to achieve the same effect as live () by binding the event to document.
Live () notation
$ (' #list Li '). Live (' Click ', ' #list li ', function () {
function code here.
});
On () notation
$ (document). On (' Click ', ' #list li ', function () {
function code here.
});
The key here is that the second parameter ' selector ' is working. It is the function of a filter, and only the descendant elements of the selected element will trigger the event.
Replace delegate ()
Delegate () is introduced in 1.4 to delegate the event-binding issues of the descendant elements through ancestor elements, in some ways similar to the live () advantage. Only Live () is delegated through the document element, and delegate can be any ancestor node. Using on () to implement the proxy is basically consistent with the delegate ().
The writing of Delegate ()
$ (' #list '). Delegate (' Li ', ' click '), function () {
function code here.
});
On () notation
$ (' #list '). On (' Click ', ' Li ', function () {
function code here.
});
It seems that the first and second parameters are reversed in order, the other is basically the same.
jquery launched on () for 2 purposes, one for the unified interface, and two for improved performance, so from now on () Replace bind (), Live (), delegate bar. In particular, do not use Live (), because it is already in the deprecated list, can be killed at any time. If you are only binding an event, then use one (), which does not change.