title: JQuery .on('click'... issue referencing list-group-items
body: <p>I am writing a large website and I got stuck referencing a small navigation bar. I am using Twitter Bootstrap. </p>
  
  <p>I'm sure I'm missing something novice. This is the JsFiddle: <a href="http://jsfiddle.net/ugdh2jmL/2/" rel="nofollow">http://jsfiddle.net/ugdh2jmL/2/</a>. I'm going to be referencing a series of dynamically loaded list objects. I can add them easily but I'm having issues declaring an onclick event; nothing happens, no message, nothing.</p>
  
  <p>Here are the snippets:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.list-group').on('click', '.list-group-item', function(e) {
    alert('success');
  }):</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;div class="col-sm-4"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-4"&gt;
          &lt;div class="list-group"&gt;
            &lt;a href="#" class="list-group-item active"&gt;
              &lt;h4 class="list-group-item-heading"&gt;List group item heading&lt;/h4&gt;
              &lt;p class="list-group-item-text"&gt;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&lt;/p&gt;
            &lt;/a&gt;
            &lt;a href="#" class="list-group-item"&gt;
              &lt;h4 class="list-group-item-heading"&gt;List group item heading&lt;/h4&gt;
              &lt;p class="list-group-item-text"&gt;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&lt;/p&gt;
            &lt;/a&gt;
            &lt;a href="#" class="list-group-item"&gt;
              &lt;h4 class="list-group-item-heading"&gt;List group item heading&lt;/h4&gt;
              &lt;p class="list-group-item-text"&gt;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- /.col-sm-4 --&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.col-sm-4 --&gt;</code></pre>
  </div>
  </div>
  </p>