title: Parent onclick() event not being called when child div is clicked
body: <p>I have a situation where I have nested divs. I have a parent div (that has an onclick() event) and a few divs inside that are being dynamically populated.  I'm given to understand that through 'bubbling,' the onclick() event should propagate up through the DOM, triggering the onclick() event in all parents.  All of the research I have done has shown a bunch of people who are trying to PREVENT this, whereas I can't get it to work.  The only way I can get the onclick() to work, is to click near the edges of the div, presumably where the child divs don't exist, and I'm clicking directly on the parent.</p>
  
  <p>I've included the applicable code below.  There can be as many as 9 of these, so-called "widgets" on the page, but I have removed all code except that referencing the first "widget".</p>
  
  <p>Update: When I try to pull everything out of the JavaScript function, and put it directly in to the HTML code, it works as I would expect. However, doing this would force me to drop desired functionality, so I'm going to try to avoid that workaround.</p>
  
  <p>There is a new fiddle below that shows essentially what I'm going for, even though the events are not calling the JS functions as I would expect.</p>
  
  <p>Update #2: I have created a fiddle (#5 below) that mimics the response I'm seeing in the code.  When using the fiddle, you'll notice that no alert is given when clicking in the center of the div, but when you click near the outer boundaries of the div, you finally get a response.</p>
  
  <p>PROBLEM SOLVED:</p>
  
  <p>Per Racheet's answer below, this problem has been solved.  I have created a final Fiddle with the fully-functioning code for reference:
  <a href="http://jsfiddle.net/v3MGX/8/" rel="nofollow">http://jsfiddle.net/v3MGX/8/</a></p>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function initializeWidgets(){
  
  var widget1 = "Professional";
  
  widget1 = 
      "&lt;div class='outer'&gt;&lt;div class='middle'&gt;
      &lt;div class='inner'&gt;&lt;h1&gt;" + widget1 + "&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;";
  
  document.getElementById("widget1").innerHTML = widget1;
  }
  
  function hoverWidgets(widgetID){
  var w = new Array();
  w[0] = "Work Experience, Educational History, and Resume Download";
  
  w[widgetID-1] = "&lt;div class='outer'&gt;&lt;div class='middle'&gt;
      &lt;div class='inner'&gt;&lt;h2&gt;" + w[widgetID-1] + "&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;";
  
  document.getElementById("widget"+widgetID).innerHTML = w[widgetID-1];
  
  }
  </code></pre>
  
  <p>APPLICABLE HTML:</p>
  
  <pre><code>&lt;div class="widget" id="widget1" onclick="alert(1);" onmouseover="hoverWidgets('1')"
  onmouseout="initializeWidgets()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CURRENT FIDDLE:
  <a href="http://jsfiddle.net/v3MGX/5/" rel="nofollow">http://jsfiddle.net/v3MGX/5/</a></p>
  
  <p>FINAL FIDDLE:
  <a href="http://jsfiddle.net/v3MGX/8/" rel="nofollow">http://jsfiddle.net/v3MGX/8/</a></p>