title: jQuery on() fires only when declared in the $(document).ready's body
body: <p>I have an unordered list of paragraphs that need to be revealed when the user clicks once the user clicks on the li that contains the paragraph. The problem is that it simply won't get called unless it is declared inside the $(document).ready() function. I've even tried it on <a href="http://jsfiddle.net/emPKS/123/" rel="nofollow">JSFiddle</a> (pay no attention to the language used) and it works just fine, as expected.</p>
  
  <pre><code>// HTML
  
  &lt;ul id="historyList"&gt;
          &lt;li&gt;header text&lt;p&gt;text&lt;/p&gt;&lt;/li&gt;
          // ...
          &lt;li&gt;header text&lt;p&gt;text&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  // CSS
  
  #historyList li p
  {
      display: none;
  }
  
  // JS
  
  $(document).ready(function () {
      revealParagraph();
  });
  
  // works just fine
  function revealParagraph() {
      $("#historyList").on("click", "li", function (event) {
          $("p", this).show();
      });
  }
  
  // simply won't work no matter what I do
  $("#historyList").on("click", "li", function (event) {
      $("p", this).show();
  });
  </code></pre>
  
  <p>On of these two functions is of course commented-out when I am testing the code. I also have $(window).scroll() and $(window).resize() and they work just fine left "hanging in the air". What am I doing wrong here? I'm working on an ASP.NET project but it hardly matters since this is solely client-side code.</p>
  
  <p>I will provide more info if needed.</p>