title: Click event isn’t firing when the user clicks on the part within the span tags
body: <p>The <code>Click</code> event to open this element isn’t firing when the user clicks on the part within the <code>&lt;span&gt;</code> tags, and adding a separate <code>click</code> function for <code>"#dropdown_box1 span"</code> didn't correct the problem.</p>
  
  <p><strong>Update -</strong> I created a fiddle which demonstrates the problem when you try clicking on the text <a href="http://jsfiddle.net/chayacooper/ezxSF/12/" rel="nofollow">http://jsfiddle.net/chayacooper/ezxSF/12/</a></p>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
      $("#dropdown_box1").click(function () {
          $("#select1").show();
      });
      var timeoutID;
      $("#select1").mouseleave(function () {
              timeoutID = setTimeout(function () {
                  $("#select1").hide();
          }, 800);
      });
          $("#select1").mouseenter(function () {
          clearTimeout(timeoutID);
      });
      $("#dropdown_container1 ul li a").click(function () {
          var text = $(this).find("input").val();
          var text_edited = text.replace(/_/g, " ");
          var currentHtml = $("#dropdown_box1 span").html();
          $("#dropdown_box1 span").html(currentHtml.replace(currentHtml, ''));
          $("#dropdown_box1 span").append(text_edited);
      });
      });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="dropdown_box1"&gt;&lt;span&gt;Select&lt;/span&gt;&lt;/div&gt;
  &lt;div class="dropdown_container" id="dropdown_container1"&gt;  
      &lt;ul id="select1"&gt; 
          &lt;!-- Several List Item Elements --&gt; 
      &lt;/ul&gt;
  &lt;/div&gt;      
  </code></pre>