Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>When you call one of the callback registation functions likes <code>$(someElement).click(...)</code>, you are actually <em>adding</em> a handler for that event. If you call the function twice with the same, the handler gets called twice. Do demonstrate, try this html page (with jquery.js in the same page):</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script src="jquery.js"&gt;&lt;/script&gt; &lt;script&gt; function addhook() { $("div").click(function(e) { console.info("click!"); $("body").append($("&lt;div&gt;click!&lt;/div&gt;")); return false; }); } $(function() { addhook(); $(window).resize(addhook); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;a href="#"&gt;Click me&lt;/a&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>On first loading the page, it behaves as expected, but then after resizing the window, clicking "Click me" gets more than one "click!".</p> <p>The only reason you would have for re-registering a handler is if the respective elements have been destroyed and re-created.</p> <p>If this is happening, and it's not convenient to attempt to reliably re-register the handlers when necessary, consider using <a href="http://api.jquery.com/on/" rel="nofollow">delegated events</a> or <a href="http://api.jquery.com/live/" rel="nofollow">.live()</a>.</p> <p>Also note the <a href="http://api.jquery.com/off/" rel="nofollow">.off() function</a> which can remove all of the handlers on a set of elements.</p> <p>Lastly, you should probably change</p> <pre><code>jQuery.fn.responsive = function() { </code></pre> <p>to</p> <pre><code>jQuery.responsive = function() { </code></pre> <p>adding to <code>jQuery.fn</code> adds functions that can be called from jQuery objects, i.e. allowing, say,</p> <pre><code>$("div").responsive(); </code></pre> <p>For some reason these functions are also added to the <code>jQuery</code> object itself, so it still works, but the latter makes the function's purpose more clear and keeps the jQuery class clean.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload