title: Open an anchor link inside a div
body: <p>I want to prevent an <code>anchor</code> link to open on the <code>document</code> <code>body</code> and instead render inside a <code>div</code>. I've used <code>e.preventDefault()</code> but I think JQuery isn't targeting that event.</p>
  
  <p>I'm programmatic-ly creating a <code>ul</code> and appending <code>li</code>'s to it from <code>array</code> items then appending the <code>ul</code> to a <code>div</code>. The structure looks like this:</p>
  
  <pre><code>//this is just a structure, not the actual HTML 
      &lt;div id="results"&gt;    
       &lt;ul&gt; .ulStyle
          &lt;li&gt;  .list-group-item 
            -header 
            -p .lead
            -a .anchorStyle
         &lt;/li&gt;      
       &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Then, I add <code>classes</code> to each <code>element</code>. Everything but the <code>ul</code> is getting the <code>class</code> and I think that may be why it's not targeting the <code>anchors</code>.</p>
  
  <p><strong>jQuery</strong>:</p>
  
  <pre><code>$(function(){
  
   console.info('** anchor-tag click handler **') 
  
  /*
    I've tried variations on the targeting from a 
    single $('.anchorStyle') to what you see below. 
  */
  
  $('div #results ul .ulStyle li .list-group-item a .anchorStyle')
      .click(function(e) {
         e.preventDefault();
         $('#results').empty();
         $('#results').load( this.getAttribute('href') );
         console.log('anchor clicked...');
       });  
  
  });
  </code></pre>
  
  <p>I get the first <code>console</code> message on <code>reload</code> but not the second <code>on click</code>. </p>
  
  <p><strong>Questions:</strong> </p>
  
  <ol>
  <li><p>Do I need a class on the <code>ul</code> to target it properly? I'm only adding
  it to the <code>ul</code> for that purpose. </p></li>
  <li><p>Does this piece of code execute with everything else and the <code>ul</code> may not have been created yet? JS/jQuery should
  still <code>bind</code> and keep listening to an <code>event</code> if it exists - or in this
  case, find the <code>element</code> I'm targeting after the <code>click event</code> fires,
  no?</p></li>
  </ol>