This API is deprecated. Use .on( "ajaxComplete", handler ) instead.
"ajaxComplete".Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.
This page describes the ajaxComplete event. For the deprecated .ajaxComplete() method, see .ajaxComplete().
Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all registered ajaxComplete handlers are executed at this time.
To observe this method in action, set up a basic Ajax load request:
<div class="trigger">Trigger</div>
@@ -21,38 +27,39 @@
Attach the event handler to the document:
-$( document ).ajaxComplete(function() {
+$( document ).on( "ajaxComplete", function() {
$( ".log" ).text( "Triggered ajaxComplete handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
-$( ".trigger" ).click(function() {
+$( ".trigger)" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
When the user clicks the element with class trigger and the Ajax request completes, the log message is displayed.
All ajaxComplete handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxComplete handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:
-$( document ).ajaxComplete(function( event, xhr, settings ) {
+$( document ).on( "ajaxComplete", function( event, xhr, settings ) {
if ( settings.url === "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxComplete handler. The result is " +
xhr.responseText );
}
-});
+} );
Note: You can get the returned Ajax contents by looking at xhr.responseText.
Request Complete." );
-});
+} );
]]>
This API is deprecated. Use .on( "ajaxError", handler ) instead.
"ajaxError".Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.
This page describes the ajaxError event. For the deprecated .ajaxError() method, see .ajaxError().
Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all registered ajaxError handlers are executed at this time. Note: This handler is not called for cross-domain script and cross-domain JSONP requests.
To observe this method in action, set up a basic Ajax load request.
<button class="trigger">Trigger</button>
@@ -22,35 +28,37 @@
Attach the event handler to the document:
-$( document ).ajaxError(function() {
+$( document ).on( "ajaxError", function() {
$( ".log" ).text( "Triggered ajaxError handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
$( "button.trigger" ).on( "click", function() {
$( "div.result" ).load( "ajax/missing.html" );
-});
+} );
When the user clicks the button and the Ajax request fails, because the requested file is missing, the log message is displayed.
All ajaxError handlers are invoked, regardless of what Ajax request was completed. To differentiate between the requests, use the parameters passed to the handler. Each time an ajaxError handler is executed, it is passed the event object, the jqXHR object (prior to jQuery 1.5, the XHR object), and the settings object that was used in the creation of the request. When an HTTP error occurs, the fourth argument (thrownError) receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." For example, to restrict the error callback to only handling events dealing with a particular URL:
-$( document ).ajaxError(function( event, jqxhr, settings, thrownError ) {
+$( document ).on( "ajaxError", function( event, jqxhr, settings, thrownError ) {
if ( settings.url == "ajax/missing.html" ) {
$( "div.log" ).text( "Triggered ajaxError handler." );
}
-});Error requesting page " + settings.url + "" );
-});
+} );
]]>
This API is deprecated. Use .on( "ajaxSend", handler ) instead.
"ajaxSend".Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all handlers that have been registered with the .ajaxSend() method are executed at this time.
This page describes the ajaxSend event. For the deprecated .ajaxSend() method, see .ajaxSend().
Whenever an Ajax request is about to be sent, jQuery triggers the ajaxSend event. Any and all registerd ajaxSend handlers are executed at this time.
To observe this method in action, set up a basic Ajax load request:
<div class="trigger">Trigger</div>
@@ -21,36 +27,37 @@
Attach the event handler to the document:
-$( document ).ajaxSend(function() {
+$( document ).on( "ajaxSend", function() {
$( ".log" ).text( "Triggered ajaxSend handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
-$( ".trigger" ).click(function() {
+$( ".trigger)" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
When the user clicks the element with class trigger and the Ajax request is about to begin, the log message is displayed.
All ajaxSend handlers are invoked, regardless of what Ajax request is to be sent. If you must differentiate between the requests, use the parameters passed to the handler. Each time an ajaxSend handler is executed, it is passed the event object, the jqXHR object (in version 1.4, XMLHttpRequestobject), and the settings object that was used in the creation of the Ajax request. For example, you can restrict the callback to only handling events dealing with a particular URL:
-$( document ).ajaxSend(function( event, jqxhr, settings ) {
+$( document ).on( "ajaxSend", function( event, jqxhr, settings ) {
if ( settings.url == "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxSend handler." );
}
-});
+} );
Starting request at " + settings.url + "" );
-});
+} );
]]>
This API is deprecated. Use .on( "ajaxStart", handler ) instead.
"ajaxStart".Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at this time.
This page describes the ajaxStart event. For the deprecated .ajaxStart() method, see .ajaxStart().
Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with .on( "ajaxStart", ... ) are executed at this time.
To observe this method in action, set up a basic Ajax load request:
<div class="trigger">Trigger</div>
@@ -18,28 +24,29 @@
Attach the event handler to any element:
-$( document ).ajaxStart(function() {
+$( document ).on( "ajaxStart", function() {
$( ".log" ).text( "Triggered ajaxStart handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
When the user clicks the element with class trigger and the Ajax request is sent, the log message is displayed.
This API is deprecated. Use .on( "ajaxStop", handler ) instead.
"ajaxStop".Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.
This page describes the ajaxStop event. For the deprecated .ajaxStop() method, see .ajaxStop().
Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all registered ajaxStop handlers are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.
To observe this method in action, set up a basic Ajax load request:
<div class="trigger">Trigger</div>
@@ -18,28 +24,29 @@
Attach the event handler to the document:
-$( document ).ajaxStop(function() {
+$( document ).on( "ajaxStop", function() {
$( ".log" ).text( "Triggered ajaxStop handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
-$( ".trigger" ).click(function() {
+$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
When the user clicks the element with class trigger and the Ajax request completes, the log message is displayed.
This API is deprecated. Use .on( "ajaxSuccess", handler ) instead.
"ajaxSuccess".Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
This page describes the ajaxSuccess event. For the deprecated .ajaxSuccess() method, see .ajaxSuccess().
Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all registered ajaxSuccess handlers are executed at this time.
To observe this method in action, set up a basic Ajax load request:
<div class="trigger">Trigger</div>
@@ -22,38 +28,39 @@
Attach the event handler to any element:
-$(document).ajaxSuccess(function() {
+$( document ).on( "ajaxSuccess", function() {
$( ".log" ).text( "Triggered ajaxSuccess handler." );
-});
+} );
Now, make an Ajax request using any jQuery method:
$( ".trigger" ).on( "click", function() {
$( ".result" ).load( "ajax/test.html" );
-});
+} );
When the user clicks the element with class trigger and the Ajax request completes successfully, the log message is displayed.
All ajaxSuccess handlers are invoked, regardless of what Ajax request was completed. If you must differentiate between the requests, you can use the parameters passed to the handler. Each time an ajaxSuccess handler is executed, it is passed the event object, the XMLHttpRequest object, and the settings object that was used in the creation of the request. For example, you can restrict the callback to only handling events dealing with a particular URL:
-$( document ).ajaxSuccess(function( event, xhr, settings ) {
+$( document ).on( "ajaxSuccess", function( event, xhr, settings ) {
if ( settings.url == "ajax/test.html" ) {
$( ".log" ).text( "Triggered ajaxSuccess handler. The Ajax response was: " +
xhr.responseText );
}
-});
+} );
Note: You can get the returned Ajax contents by looking at xhr.responseXML or xhr.responseText for xml and html respectively.
Successful Request!" );
-});
+} );
]]>
To animate the opacity, left offset, and height of the image simultaneously:
-$( "#clickme" ).click(function() {
+$( "#clickme)" ).on( "click", function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
@@ -101,7 +101,7 @@ $( "li" ).animate({
As of jQuery version 1.4, you can set per-property easing functions within a single .animate() call. In the first version of .animate(), each property can take an array as its value: The first member of the array is the CSS property and the second member is an easing function. If a per-property easing function is not defined for a particular property, it uses the value of the .animate() method's optional easing argument. If the easing argument is not defined, the default swing function is used.
For example, to simultaneously animate the width and height with the swing easing function and the opacity with the linear easing function:
-$( "#clickme" ).click(function() {
+$( "#clickme)" ).on( "click", function() {
$( "#book" ).animate({
width: [ "toggle", "swing" ],
height: [ "toggle", "swing" ],
@@ -113,7 +113,7 @@ $( "#clickme" ).click(function() {
In the second version of .animate(), the options object can include the specialEasing property, which is itself an object of CSS properties and their corresponding easing functions. For example, to simultaneously animate the width using the linear easing function and the height using the easeOutBounce easing function:
-$( "#clickme" ).click(function() {
+$( "#clickme)" ).on( "click", function() {
$( "#book" ).animate({
width: "toggle",
height: "toggle"
@@ -137,7 +137,7 @@ $( "#clickme" ).click(function() {
Animates a div's left property with a relative value. Click several times on the buttons to see the relative animations queued up.
Animates the first div's left property and synchronizes the remaining divs, using the step function to set their left properties at each stage of the animation.
Change the color of any div that is animated.
Display the checked attribute and property of a checkbox as it changes.
" + $input.attr( "checked" ) + "
" +
".prop( 'checked' ): " + $input.prop( "checked" ) + "
" +
".is( ':checked' ): " + $input.is( ":checked" ) + "" );
- })
- .change();
+ } )
+ .trigger( "change" );
]]>
As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged. For earlier versions, the .bind() method is used for attaching an event handler directly to elements. Handlers are attached to the currently selected elements in the jQuery object, so those elements must exist at the point the call to .bind() occurs. For more flexible event binding, see the discussion of event delegation in .on().
Any string is legal for eventType; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using .trigger() or .triggerHandler().
If the eventType string contains a period (.) character, then the event is namespaced. The period character separates the event from its namespace. For example, in the call .bind( "click.name", handler ), the string click is the event type, and the string name is the namespace. Namespacing allows us to unbind or trigger some events of a type without affecting others. See the discussion of .unbind() for more information.
- There are shorthand methods for some standard browser events such as .click() that can be used to attach or trigger event handlers. For a complete list of shorthand methods, see the events category.
+ Some events have dedicated pages, describing specifics of their usage. For a complete list of those events, see the events category.
When an event reaches an element, all handlers bound to that event type for the element are fired. If there are multiple handlers registered, they will always execute in the order in which they were bound. After all handlers have executed, the event continues along the normal event propagation path.
A basic usage of .bind() is:
@@ -221,7 +221,7 @@ $( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
.fadeIn( 30 )
.fadeOut( 1000 );
});
-$( "button" ).click(function() {
+$( "button)" ).on( "click", function() {
$( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
]]>
diff --git a/entries/blur-shorthand.xml b/entries/blur-shorthand.xml
new file mode 100644
index 00000000..589a1ceb
--- /dev/null
+++ b/entries/blur-shorthand.xml
@@ -0,0 +1,37 @@
+
+
+ .blur()
+ Bind an event handler to the "blur" event, or trigger that event on an element.
+
+ 1.0
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.4.3
+
+ An object containing data that will be passed to the event handler.
+
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.0
+
+
+
+ This API is deprecated.
+ Instead of .blur( handler ) or .blur( eventData, handler ), use .on( "blur", handler ) or .on( "blur", eventData, handler ), respectively.
+ Instead of .blur(), use .trigger( "blur" ).
+
+
+
diff --git a/entries/blur.xml b/entries/blur.xml
index 11afbd6a..d99003e9 100644
--- a/entries/blur.xml
+++ b/entries/blur.xml
@@ -1,16 +1,15 @@
-
- .blur()
- Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.
+
+
+Bind an event handler to the "blur" event, or trigger that event on an element.
+
+ blur event
+ Bind an event handler to the "blur" event.
- 1.0
-
- A function to execute each time the event is triggered.
- 1.7
+
+ The string "blur".
-
-
- 1.4.3
An object containing data that will be passed to the event handler.
@@ -19,11 +18,10 @@
-
- 1.0
-
- This method is a shortcut for .on( "blur", handler ) in the first two variations, and .trigger( "blur" ) in the third.
+
+ This page describes the blur event. For the deprecated .blur() method, see .blur().
+
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
For example, consider the HTML:
@@ -34,33 +32,53 @@
<div id="other">
Trigger the handler
</div>
-The event handler can be bound to the first input field:
-$( "#target" ).blur(function() {
- alert( "Handler for .blur() called." );
-});
+
+ The event handler can be bound to the first input field:
+
+$( "#target" ).on( "blur", function() {
+ alert( "Handler for `blur` called." );
+} );
Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:
- Handler for .blur() called.
+ Handler for `blur` called.
- To trigger the event programmatically, apply .blur() without an argument:
+ To trigger the event programmatically, call .trigger( "blur" ):
-$( "#other" ).click(function() {
- $( "#target" ).blur();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "blur" );
+} );
After this code executes, clicks on Trigger the handler will also alert the message.
- The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().
+ The blur event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods.
-
To trigger the blur event on all paragraphs:
+
+
+ blur event
+ Trigger the "blur" event on an element.
+
+ 1.0
+
+ The string "blur".
+
+
+
+ See the description for .on( "blur", ... ).
+
+
+
+
diff --git a/entries/button-selector.xml b/entries/button-selector.xml
index 858522e5..12c8471c 100644
--- a/entries/button-selector.xml
+++ b/entries/button-selector.xml
@@ -16,9 +16,9 @@
var input = $( ":button" ).addClass( "marked" );
$( "div" ).text( "For this type jQuery found " + input.length + "." );
// Prevent the form from submitting
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]>
+
+ .change()
+ Bind an event handler to the "change" event, or trigger that event on an element.
+
+ 1.0
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.4.3
+
+ An object containing data that will be passed to the event handler.
+
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.0
+
+
+
+ This API is deprecated.
+ Instead of .change( handler ) or .change( eventData, handler ), use .on( "change", handler ) or .on( "change", eventData, handler ), respectively.
+ Instead of .change(), use .trigger( "change" ).
+
+
+
diff --git a/entries/change.xml b/entries/change.xml
index 67d521d9..e179c506 100644
--- a/entries/change.xml
+++ b/entries/change.xml
@@ -1,16 +1,15 @@
-
- .change()
- Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
+
+Bind an event handler to the "change" event, or trigger that event on an element.
+
+
+ change event
+ Bind an event handler to the "change" event.
- 1.0
-
- A function to execute each time the event is triggered.
- 1.7
+
+ The string "change".
-
-
- 1.4.3
An object containing data that will be passed to the event handler.
@@ -19,11 +18,10 @@
-
- 1.0
-
- This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.
+
+ This page describes the change event. For the deprecated .change() method, see .change().
+
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
For example, consider the HTML:
@@ -40,35 +38,34 @@
The event handler can be bound to the text input and the select box:
-$( ".target" ).change(function() {
- alert( "Handler for .change() called." );
-});
+$( ".target" ).on( "change", function() {
+ alert( "Handler for `change` called." );
+} );
- Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, apply .change() without arguments:
+ Now when the second option is selected from the dropdown, the alert is displayed. It is also displayed if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered. To trigger the event manually, use .trigger( "change" ):
-$( "#other" ).click(function() {
- $( ".target" ).change();
-});
+$( "#other" ).on( "click", function() {
+ $( ".target" ).trigger( "change" );
+} );
After this code executes, clicks on Trigger the handler will also alert the message. The message will display twice, because the handler has been bound to the change event on both of the form elements.
As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.
-
Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw.
To add a validity test to all text input elements:
+
+
+ change event
+ Trigger the "change" event on an element.
+
+ 1.0
+
+ The string "change".
+
+
+
+ See the description for .on( "change", ... ).
+
+
+
+
diff --git a/entries/checkbox-selector.xml b/entries/checkbox-selector.xml
index 843cdaf7..ba0fd815 100644
--- a/entries/checkbox-selector.xml
+++ b/entries/checkbox-selector.xml
@@ -26,9 +26,9 @@ $( "div" )
.css( "color", "red" );
// Prevent the form from submitting
-$( "form" ).submit(function( event ) {
+$( "form" ).on( "submit", function( event ) {
event.preventDefault();
-});
+} );
]]>
Find all children of the clicked element.
Empty the queue.
+
+ .click()
+ Bind an event handler to the "click" event, or trigger that event on an element.
+
+ 1.0
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.4.3
+
+ An object containing data that will be passed to the event handler.
+
+
+ A function to execute each time the event is triggered.
+
+
+
+ 1.0
+
+
+
+ This API is deprecated.
+ Instead of .click( handler ) or .click( eventData, handler ), use .on( "click", handler ) or .on( "click", eventData, handler ), respectively.
+ Instead of .click(), use .trigger( "click" ).
+
+
+
diff --git a/entries/click.xml b/entries/click.xml
index 56475da4..c5f9deb2 100644
--- a/entries/click.xml
+++ b/entries/click.xml
@@ -1,16 +1,15 @@
-
- .click()
- Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
+
+
+Bind an event handler to the "click" event, or trigger that event on an element.
+
+ click event
+ Bind an event handler to the "click" event.
- 1.0
-
- A function to execute each time the event is triggered.
- 1.7
+
+ The string "click".
-
-
- 1.4.3
An object containing data that will be passed to the event handler.
@@ -19,12 +18,11 @@
-
- 1.0
-
- This method is a shortcut for .on( "click", handler ) in the first two variations, and .trigger( "click" ) in the third.
- The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
+
+ This page describes the click event. For the deprecated .click() method, see .click().
+
+ The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event.
For example, consider the HTML:
<div id="target">
@@ -40,19 +38,19 @@
The event handler can be bound to any <div>:
-$( "#target" ).click(function() {
- alert( "Handler for .click() called." );
-});
+$( "#target" ).on( "click", function() {
+ alert( "Handler for `click` called." );
+} );
Now if we click on this element, the alert is displayed:
- Handler for .click() called.
+ Handler for `click` called.
We can also trigger the event when a different element is clicked:
-$( "#other" ).click(function() {
- $( "#target" ).click();
-});
+$( "#other" ).on( "click", function() {
+ $( "#target" ).trigger( "click" );
+} );
After this code executes, clicking on Trigger the handler will also alert the message.
The click event is only triggered after this exact series of events:
@@ -62,13 +60,12 @@ $( "#other" ).click(function() {
This is usually the desired sequence before taking an action. If this is not required, the mousedown or mouseup event may be more suitable.
-
Hide paragraphs on a page when they are clicked: