forked from jquery/api.jquery.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchange.xml
117 lines (114 loc) · 4.74 KB
/
change.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<?xml version="1.0"?>
<entries>
<desc>Bind an event handler to the "change" event, or trigger that event on an element.</desc>
<entry type="method" name="on" return="jQuery">
<title>change event</title>
<desc>Bind an event handler to the "change" event.</desc>
<signature>
<added>1.7</added>
<argument name=""change"" type="string">
<desc>The string <code>"change"</code>.</desc>
</argument>
<argument name="eventData" type="Anything" optional="true">
<desc>An object containing data that will be passed to the event handler.</desc>
</argument>
<argument name="handler" type="Function">
<desc>A function to execute each time the event is triggered.</desc>
<argument name="eventObject" type="Event" />
</argument>
</signature>
<longdesc>
<div class="warning">
<p>This page describes the <code>change</code> event. For the deprecated <code>.change()</code> method, see <a href="/change-shorthand/"><code>.change()</code></a>.</p>
</div>
<p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code><input></code> elements, <code><textarea></code> boxes and <code><select></code> 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.</p>
<p>For example, consider the HTML:</p>
<pre><code>
<form>
<input class="target" type="text" value="Field 1">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
</code></pre>
<p>The event handler can be bound to the text input and the select box:</p>
<pre><code>
$( ".target" ).on( "change", function() {
alert( "Handler for `change` called." );
} );
</code></pre>
<p>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 <code>.trigger( "change" )</code>:</p>
<pre><code>
$( "#other" ).on( "click", function() {
$( ".target" ).trigger( "change" );
} );
</code></pre>
<p>After this code executes, clicks on <samp>Trigger the handler</samp> will also alert the message. The message will display twice, because the handler has been bound to the <code>change</code> event on both of the form elements.</p>
<p>As of jQuery 1.4, the <code>change</code> event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.</p>
<div class="warning">
<p><strong>Note: </strong>Changing the value of an input element using JavaScript, using <a href="/val"><code>.val()</code></a> for example, won't fire the event.</p>
</div>
</longdesc>
<example>
<desc>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.</desc>
<code><![CDATA[
$( "select" )
.on( "change", function() {
var str = "";
$( "select option:selected" ).each( function() {
str += $( this ).text() + " ";
} );
$( "div" ).text( str );
} )
.trigger( "change" );
]]></code>
<css><![CDATA[
div {
color: red;
}
]]></css>
<html><![CDATA[
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
]]></html>
</example>
<example>
<desc>To add a validity test to all text input elements:</desc>
<code><![CDATA[
$( "input[type='text']" ).on( "change", function() {
// Check input( $( this ).val() ) for validity here
} );
]]></code>
</example>
<category slug="events/form-events"/>
<category slug="forms"/>
<category slug="version/1.0"/>
<category slug="version/1.7"/>
</entry>
<entry type="method" name="trigger" return="jQuery">
<title>change event</title>
<desc>Trigger the "change" event on an element.</desc>
<signature>
<added>1.0</added>
<argument name=""change"" type="string">
<desc>The string <code>"change"</code>.</desc>
</argument>
</signature>
<longdesc>
<p>See the description for <a href="#on1"><code>.on( "change", ... )</code></a>.</p>
</longdesc>
<category slug="events/form-events"/>
<category slug="version/1.0"/>
</entry>
</entries>