title: Stop Propagation on Input Click
body: <p>I have an html table, and when a user clicks a table row, the row's checkbox is checked, and some other functionality occurs. When a user clicks on a select or input, I would like to stop the propagation so the checkbox does not change. I have demonstrated the functionality I am looking for in this JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/ehf7pc3f/6/" rel="noreferrer">http://jsfiddle.net/ehf7pc3f/6/</a></p>
  
  <p>On my development site, when a user clicks a select, the checkbox is changed (as intended), but if a user clicks an input, the checkbox does not change. I have this code to stop the checkbox from changing:</p>
  
  <pre><code>$("select").click(function (e) {
      e.stopPropagation();
  });
  
  $("input").click(function (e) {
      e.stopPropagation();
  });
  </code></pre>
  
  <p>Does anyone have an idea as to why the select click works, but the input click does not?</p>
  
  <p>Update* </p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/ehf7pc3f/8/" rel="noreferrer">http://jsfiddle.net/ehf7pc3f/8/</a></p>
  
  <p>I have added a new JSFiddle that fires an alert when the input is clicked and an alert when a row is clicked. In the fiddle, if I click the input, only the input alert fires. If I do this same test on my development site, only the row alert fires.</p>
  
  <p>Here's the actual code on my development site:</p>
  
  <pre><code>&lt;table class="full-width row-table" style="table-layout:fixed;"&gt;
      &lt;tr style="background:none;" class="no-hover row"&gt;
          &lt;td class="no-padding" style="width:16px;"&gt;&lt;input class="check-box" style="margin:2px 0px;" type="checkbox" /&gt;&lt;/td&gt;
          &lt;td class="no-padding" style="width:6px;"&gt;&lt;span class="arrow2" style="margin:6px 0px 0px 0px;"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td style="width:94px;"&gt;
              &lt;span class="contact-label"&gt;Owner &lt;br /&gt; &lt;/span&gt;
              &lt;select class="contact-drop-down hidden"&gt;
                  &lt;option value="Owner"&gt;Owner&lt;/option&gt;
                  &lt;option value="Applicant"&gt;Applicant&lt;/option&gt;
                  &lt;option value="Contractor"&gt;Contractor&lt;/option&gt;
              &lt;/select&gt;
          &lt;/td&gt;
          &lt;td style="width:95px;"&gt;
              &lt;p class="title-label"&gt;Owner&lt;/p&gt;
          &lt;/td&gt;
          &lt;td style="width:119px;"&gt;
              &lt;p class="name-label"&gt;Michael Douglas&lt;/p&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>