title: jQuery radio button on change does not work
body: <p>I have seen <a href="https://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection">this question</a> and I have seen <a href="http://jsfiddle.net/N9tBx/" rel="nofollow noreferrer">this fiddle</a>.</p>
  
  <p>My <code>Fiddle</code> <a href="http://jsfiddle.net/e5ByP/" rel="nofollow noreferrer">here</a>. It's a simple question. Why doesn't it work?</p>
  
  <pre><code>#html
  &lt;input checked="checked" id="article_format_html" name="article[format]" type="radio" value="html"&gt;Some meaningful value
  &lt;input id="article_format_text" name="article[format]" type="radio" value="text"&gt;Another Value
  
  #js
  $("input[name='article[format]']:radio").change(alert('hola'));
  </code></pre>
  
  <h1>Edit:</h1>
  
  <p>On popular demand I did this:</p>
  
  <pre><code>.change(function(){alert('hola')});
  </code></pre>
  
  <p><a href="http://jsfiddle.net/e5ByP/5/" rel="nofollow noreferrer">Fiddle</a>.</p>
  
  <p>Result: Doesn't work.</p>
  
  <h1>Edit 2: (Why I had the problem)</h1>
  
  <p>So, JS-Fiddle wraps your js code in the head of the <code>iframe</code> that is your <code>Result</code> section. For jQuery selectors (or any js that manipulates the DOM) to work properly, it has to be executed <em>*after*</em> the DOM element has been rendered. Hence, wrapping your code on ready and/or just before <code>body</code> closes, is the safest way to ensure that your query selectors don't return <code>undefined</code>.</p>