title: How can I make entire DIV clickable AND open child links in separate DIV?
body: <p>I asked a precursor to this question here:
  <a href="https://stackoverflow.com/questions/9878458/click-link-in-div-and-show-php-html-in-separate-div">Click link in DIV and show PHP/HTML in separate DIV</a></p>
  
  <p>Then, after I removed the first script shown below, I was able to get the second script to work.  I revised my question, but it appears to have gone silent.  So I have a slightly modified question.</p>
  
  <p>What is the conflict between the 2 scripts below and how can I modify them to work in tandem?  Basically I want to be able to click anywhere in the DIV (".side_items") and have the child anchor links open in a separate DIV ("#main_content")</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){ 
     $(".side_items").click(function(){
       window.location=$(this).find("a").attr("href");
       return false;
    })
   });
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
     $(".side_items a").click(function(e){
      e.preventDefault(); 
         $("#main_content").load($(this).attr("href"));
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML: (slightly simplified)</p>
  
  <pre><code>&lt;div id="main_content"&gt;
  &lt;/div&gt;
  
  &lt;div id="right_side"&gt;
    &lt;div class="side_items"&gt;
    &lt;a href="content.html"&gt;
    &lt;img src="images/examplethumb.png" /&gt;&lt;br /&gt;
    Content&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Both scripts work independently to achieve their individual desired result.</p>