title: Changing td value with select and not propagating event
body: <p>I have a jsfiddle that replace a td value with a select with 2 values: <a href="http://jsfiddle.net/B47km/" rel="nofollow">http://jsfiddle.net/B47km/</a></p>
  
  <p>When i click the td, the select appears, but when i'm going to see the option elements the click event of the td throws and i can't show the options. How can i solve this?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;table&gt;
      &lt;td class="test"&gt;1&lt;/td&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The js code:</p>
  
  <pre><code>$(function () {
      $(".test").click(function (e) {
          e.stopPropagation();
          var currentEle = $(this);
          var value = $(this).html();
          select = '&lt;select class="select-dorsal form-control" type="text"&gt;'
          +'&lt;option name="1" value="1"&gt;1&lt;/option&gt;'
          +'&lt;option name="2" value="2"&gt;2&lt;/option&gt;'
          +'&lt;/select&gt;';
          $(currentEle).html(select);
      });
  });
  </code></pre>