replace uses of .bind/.unbind with prefered .on/.off

Author: jouve

entries/blur.xml

@@ -21,7 +21,7 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('blur', handler)</code> in the first two variations, and <code>.trigger('blur')</code> in the third.</p>
+    <p>This method is a shortcut for <code>.on('blur', handler)</code> in the first two variations, and <code>.trigger('blur')</code> in the third.</p>
     <p>The <code>blur</code> event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <code>&lt;input&gt;</code>. 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.</p>
     <p>For example, consider the HTML:</p>
     <pre><code>&lt;form&gt;

entries/change.xml

@@ -21,7 +21,7 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('change', handler)</code> in the first two variations, and <code>.trigger('change')</code> in the third.</p>
+    <p>This method is a shortcut for <code>.on('change', handler)</code> in the first two variations, and <code>.trigger('change')</code> in the third.</p>
     <p>The <code>change</code> event is sent to an element when its value changes. This event is limited to <code>&lt;input&gt;</code> elements, <code>&lt;textarea&gt;</code> boxes and <code>&lt;select&gt;</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>&lt;form&gt;

entries/click.xml

@@ -21,10 +21,10 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>In the first two variations, this method is a shortcut for <code>.bind("click", handler)</code>, as well as for <code>.on("click", handler)</code> as of jQuery 1.7. In the third variation, when <code>.click()</code> is called without arguments, it is a shortcut for <code>.trigger("click")</code>. </p>
-    <p>The <code>click</code> 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.</p>
-    <pre><code>For example, consider the HTML:
-&lt;div id="target"&gt;
+    <p>This method is a shortcut for <code>.on('click', handler)</code> in the first two variations, and <code>.trigger('click')</code> in the third.
+    The <code>click</code> 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:</p>
+    <pre><code>&lt;div id="target"&gt;
   Click here
 &lt;/div&gt;
 &lt;div id="other"&gt;

entries/closest.xml

@@ -101,7 +101,7 @@ $('li.item-a').closest('#one', listItemII)
     <example>
       <desc>Show how event delegation can be done with closest. The closest list element toggles a yellow background when it or its descendent is clicked.</desc>
       <code><![CDATA[
-  $( document ).bind("click", function( e ) {
+  $( document ).on("click", function( e ) {
     $( e.target ).closest("li").toggleClass("hilight");
   });
 ]]></code>
@@ -118,7 +118,7 @@ $('li.item-a').closest('#one', listItemII)
       <desc>Pass a jQuery object to closest. The closest list element toggles a yellow background when it or its descendent is clicked.</desc>
       <code><![CDATA[
   var $listElements = $("li").css("color", "blue");
-  $( document ).bind("click", function( e ) {
+  $( document ).on("click", function( e ) {
     $( e.target ).closest( $listElements ).toggleClass("hilight");
   });
 ]]></code>

entries/dblclick.xml

@@ -21,7 +21,7 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('dblclick', handler)</code> in the first two variations, and <code>.trigger('dblclick')</code> in the third.
+    <p>This method is a shortcut for <code>.on('dblclick', handler)</code> in the first two variations, and <code>.trigger('dblclick')</code> in the third.
     The <code>dblclick</code> event is sent to an element when the element is double-clicked. Any HTML element can receive this event.
     For example, consider the HTML:</p>
     <pre><code>&lt;div id="target"&gt;

entries/deferred.done.xml

@@ -53,7 +53,7 @@ dfd
 });
 
 /* resolve the Deferred object when the button is clicked */
-$("button").bind("click", function() {
+$("button").on("click", function() {
   dfd.resolve("and");
 });
 ]]></code>

entries/die.xml

@@ -21,8 +21,8 @@
     </argument>
   </signature>
   <longdesc>
-    <p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to calling <code>.unbind()</code> with no arguments, which is used to remove all handlers attached with <code>.bind()</code>.
-  See the discussions of <code>.live()</code> and <code>.unbind()</code> for further details.</p>
+    <p>Any handler that has been attached with <code>.live()</code> can be removed with <code>.die()</code>. This method is analogous to calling <code>.off()</code> with no arguments, which is used to remove all handlers attached with <code>.on()</code>.
+  See the discussions of <code>.live()</code> and <code>.off()</code> for further details.</p>
     <p>If used without an argument, .die() removes <em>all</em> event handlers previously attached using <code>.live()</code> from the elements.</p>
     <p><strong>As of jQuery 1.7</strong>, use of <code>.die()</code> (and its complementary method, <code>.live()</code>) is not recommended. Instead, use <a href="http://api.jquery.com/off/"><code>.off()</code></a> to remove event handlers bound with <a href="http://api.jquery.com/on/"><code>.on()</code></a></p>
     <p><strong>Note:</strong> In order for .die() to function correctly, the selector used with it must match exactly the selector initially used with .live().</p>

entries/error.xml

@@ -18,7 +18,7 @@
     </argument>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('error', handler)</code>.</p>
+    <p>This method is a shortcut for <code>.on('error', handler)</code>.</p>
     <p>The <code>error</code> event is sent to elements, such as images, that are referenced by a document and loaded by the browser. It is called if the element was not loaded correctly.</p>
     <p>For example, consider a page with a simple image element:</p>
     <pre><code>&lt;img alt="Book" id="book" /&gt;</code></pre>

entries/event.namespace.xml

@@ -11,7 +11,7 @@
   <example>
     <desc>Determine the event namespace used.</desc>
     <code><![CDATA[
-$("p").bind("test.something", function(event) {
+$("p").on("test.something", function(event) {
   alert( event.namespace );
 });
 $("button").click(function(event) {

entries/event.pageX.xml

@@ -11,7 +11,7 @@
     <css>body {background-color: #eef; }
     div { padding: 20px; }</css>
     <html><![CDATA[<div id="log"></div>]]></html>
-    <code><![CDATA[$(document).bind('mousemove',function(e){
+    <code><![CDATA[$(document).on('mousemove',function(e){
           $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
 }); ]]></code>
   </example>

entries/event.pageY.xml

@@ -13,7 +13,7 @@
     </css>
     <html><![CDATA[<div id="log"></div>]]></html>
     <code><![CDATA[
-$(document).bind('mousemove',function(e){
+$(document).on('mousemove',function(e){
   $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
 });
     ]]></code>

entries/event.which.xml

@@ -11,7 +11,7 @@
   </longdesc>
   <example>
     <desc>Log which key was depressed.</desc>
-    <code><![CDATA[$('#whichkey').bind('keydown',function(e){
+    <code><![CDATA[$('#whichkey').on('keydown',function(e){
   $('#log').html(e.type + ': ' +  e.which );
 });  ]]></code>
     <html><![CDATA[
@@ -21,7 +21,7 @@
   <example>
     <desc>Log which mouse button was depressed.</desc>
     <code><![CDATA[
-$('#whichkey').bind('mousedown',function(e){
+$('#whichkey').on('mousedown',function(e){
   $('#log').html(e.type + ': ' +  e.which );
 });
 ]]></code>

entries/focus.xml

@@ -22,7 +22,7 @@
   </signature>
   <longdesc>
     <ul>
-      <li>This method is a shortcut for <code>.bind('focus', handler)</code> in the first and second variations, and <code>.trigger('focus')</code> in the third.</li>
+      <li>This method is a shortcut for <code>.on('focus', handler)</code> in the first and second variations, and <code>.trigger('focus')</code> in the third.</li>
       <li>The <code>focus</code> event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as  form elements (<code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, etc.) and links (<code>&lt;a href&gt;</code>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's <code>tabindex</code> property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.</li>
       <li>Elements with focus are usually highlighted in some way by the browser, for example with a dotted line surrounding the element. The focus is used to determine which element is the first to receive keyboard-related events.</li>
     </ul>

entries/focusin.xml

@@ -18,7 +18,7 @@
     </argument>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('focusin', handler)</code>.</p>
+    <p>This method is a shortcut for <code>.on('focusin', handler)</code>.</p>
     <p>The <code>focusin</code> event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the <a href="/focus">focus</a> event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).</p>
     <p>This event will likely be used together with the <a href="/focusout">focusout</a> event.</p>
   </longdesc>

entries/focusout.xml

@@ -18,7 +18,7 @@
     </argument>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('focusout', handler)</code>.</p>
+    <p>This method is a shortcut for <code>.on('focusout', handler)</code>.</p>
     <p>The <code>focusout</code> event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the <a href="/blur">blur</a> event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).</p>
     <p>This event will likely be used together with the <a href="/focusin">focusin</a> event.</p>
   </longdesc>

entries/hover.xml

@@ -61,7 +61,7 @@ $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
     </example>
     <example>
       <desc>To unbind the above example use:</desc>
-      <code><![CDATA[$("td").unbind('mouseenter mouseleave');]]></code>
+      <code><![CDATA[$("td").off('mouseenter mouseleave');]]></code>
     </example>
     <category slug="events/mouse-events"/>
     <category slug="version/1.0"/>
@@ -77,7 +77,7 @@ $("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
     <longdesc>
       <p>The <code>.hover()</code> method, when passed a single function, will execute that handler for both <code>mouseenter</code> and <code>mouseleave</code> events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the <code>event.type</code>.</p>
       <p>Calling <code>$(selector).hover(handlerInOut)</code> is shorthand for:</p>
-      <pre><code>$(selector).bind("mouseenter mouseleave", handlerInOut);</code></pre>
+      <pre><code>$(selector).on("mouseenter mouseleave", handlerInOut);</code></pre>
       <p>See the discussions for <code><a href="/mouseenter">.mouseenter()</a></code> and <code><a href="/mouseleave">.mouseleave()</a></code> for more details.</p>
     </longdesc>
     <example>

entries/jQuery.proxy.xml

@@ -69,7 +69,7 @@ var me = {
     /* With proxy, `this` refers to the me object encapsulating */
     /* this function. */
     $("#log").append( "Hello " + this.type + "<br>" );
-    $("#test").unbind("click", this.test);
+    $("#test").off("click", this.test);
   }
 };
 

entries/jQuery.sub.xml

@@ -50,7 +50,7 @@ typeof jQuery('body').myCustomMethod // undefined]]></code>
     });
 
     // A new remove event is now triggered from this copy of jQuery
-    $(document).bind("remove", function(e) {
+    $(document).on("remove", function(e) {
       $(e.target).parent().hide();
     });
   });

entries/jQuery.xml

@@ -79,7 +79,7 @@ $.post( "url.xml", function(data) {
       <h4 id="returning-empty-set">Returning an Empty Set</h4>
       <p>As of jQuery 1.4, calling the <code>jQuery()</code> method with <em>no arguments</em> returns an empty jQuery set (with a <code><a href="http://api.jquery.com/length/">.length</a></code> property of 0). In previous versions of jQuery, this would return a set containing the document node.</p>
       <h4 id="working-with-plain-objects">Working With Plain Objects</h4>
-      <p>At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: <code>.data()</code>,<code>.prop()</code>,<code>.bind()</code>, <code>.unbind()</code>, <code>.trigger()</code> and <code>.triggerHandler()</code>. The use of <code>.data()</code> (or any method requiring <code>.data()</code>) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).</p>
+      <p>At present, the only operations supported on plain JavaScript objects wrapped in jQuery are: <code>.data()</code>,<code>.prop()</code>,<code>.on()</code>, <code>.off()</code>, <code>.trigger()</code> and <code>.triggerHandler()</code>. The use of <code>.data()</code> (or any method requiring <code>.data()</code>) on a plain object will result in a new property on the object called jQuery{randomNumber} (eg. jQuery123456789).</p>
       <pre><code>
 // define a plain object
 var foo = {foo: "bar", hello: "world"};
@@ -99,7 +99,7 @@ $foo.data( "keyName", "someValue");
 console.log( $foo ); // will now contain a jQuery{randomNumber} property
 
 // test binding an event name and triggering
-$foo.bind( "eventName", function () {
+$foo.on( "eventName", function () {
   console.log("eventName was called");
 });
 

entries/keydown.xml

@@ -21,7 +21,7 @@
   </signature>
   <desc>Bind an event handler to the "keydown" JavaScript event, or trigger that event on an element.</desc>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('keydown', handler)</code> in the first and second variations, and <code>.trigger('keydown')</code> in the third.</p>
+    <p>This method is a shortcut for <code>.on('keydown', handler)</code> in the first and second variations, and <code>.trigger('keydown')</code> in the third.</p>
     <p>The <code>keydown</code> event is sent to an element when the user first presses a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
     <p>For example, consider the HTML:</p>
     <pre><code>&lt;form&gt;

entries/keypress.xml

@@ -22,7 +22,7 @@
   </signature>
   <longdesc>
     <p><strong>Note:</strong> as the <code>keypress</code> event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.</p>
-    <p>This method is a shortcut for <code>.bind("keypress", handler)</code> in the first two variations, and <code>.trigger("keypress")</code> in the third.</p>
+    <p>This method is a shortcut for <code>.on('keypress', handler)</code> in the first two variations, and <code>.trigger('keypress')</code> in the third.</p>
     <p>The <code>keypress</code> event is sent to an element when the browser registers keyboard input. This is similar to the <code>keydown</code> event, except in the case of key repeats. If the user presses and holds a key, a <code>keydown </code>event is triggered once, but separate <code>keypress</code> events are triggered for each inserted character. In addition, modifier keys (such as Shift) trigger <code>keydown</code> events but not <code>keypress</code> events.</p>
     <p>A <code>keypress</code> event handler can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
     <p>For example, consider the HTML:</p>

entries/keyup.xml

@@ -21,7 +21,7 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('keyup', handler)</code> in the first two variations, and <code>.trigger('keyup')</code> in the third.</p>
+    <p>This method is a shortcut for <code>.on('keyup', handler)</code> in the first two variations, and <code>.trigger('keyup')</code> in the third.</p>
     <p>The <code>keyup</code> event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus. Focusable elements can vary between browsers, but form elements can always get focus so are reasonable candidates for this event type.</p>
     <p>For example, consider the HTML:</p>
     <pre><code>&lt;form&gt;

entries/live.xml

@@ -53,7 +53,7 @@ $(document).on("click", "a.offsite", function(){ alert("Goodbye!"); });        /
 <ol><li>Use natively clickable elements such as <code>a</code> or <code>button</code>, as both of these do bubble to <code>document</code>.</li><li>Use <code>.on()</code> or <code>.delegate()</code> attached to an element below the level of <code>document.body</code>, since mobile iOS does bubble within the body.</li><li>Apply the CSS style <code>cursor:pointer</code> to the element that needs to bubble clicks (or a parent including <code>document.documentElement</code>). Note however, this will disable copy\paste on the element and cause it to be highlighted when touched.</li></ol>
 </li>
       <li>Calling <a href="http://api.jquery.com/event.stopPropagation"><code>event.stopPropagation()</code></a> in the event handler is ineffective in stopping event handlers attached lower in the document; the event has already propagated to <code>document</code>.</li>
-      <li>The <code>.live()</code> method interacts with other event methods in ways that can be surprising, e.g., <code>$(document).unbind("click")</code> removes all click handlers attached by any call to <code>.live()</code>!</li>
+      <li>The <code>.live()</code> method interacts with other event methods in ways that can be surprising, e.g., <code>$(document).off("click")</code> removes all click handlers attached by any call to <code>.live()</code>!</li>
     </ul>
     <p>For pages still using <code>.live()</code>, this list of version-specific differences may be helpful:</p>
     <ul>

entries/load-event.xml

@@ -18,7 +18,7 @@
     </argument>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('load', handler)</code>.</p>
+    <p>This method is a shortcut for <code>.on('load', handler)</code>.</p>
     <p>The <code>load</code> event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the <code>window</code> object.</p>
     <p>For example, consider a page with a simple image:</p>
     <pre><code>&lt;img src="book.png" alt="Book" id="book" /&gt;</code></pre>

entries/mousedown.xml

@@ -21,7 +21,7 @@
     <added>1.0</added>
   </signature>
   <longdesc>
-    <p>This method is a shortcut for <code>.bind('mousedown', handler)</code> in the first variation, and <code>.trigger('mousedown')</code> in the second.</p>
+    <p>This method is a shortcut for <code>.on('mousedown', handler)</code> in the first variation, and <code>.trigger('mousedown')</code> in the second.</p>
     <p>The <code>mousedown</code> event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed. Any HTML element can receive this event.</p>
     <p>For example, consider the HTML:</p>
     <pre><code>&lt;div id="target"&gt;