title: JQuery acts as if it traverses DOM tree as Capturing
body: <p>Digest:</p>
  
  <ul>
  <li>Problem using jQuery and jQuery mobile with a radio button inside a tr tag.</li>
  <li>A: click event handler of radio, B: click event handler of tr</li>
  <li>When using radio button, B->A (tr.click then radio.click)</li>
  <li>When using other elements, A (a.click then propagation stopped by
  API)</li>
  </ul>
  
  <p>Environment:</p>
  
  <ul>
  <li>jQuery 1.11.3</li>
  <li>jQuery Mobile 1.4.5</li>
  <li>Running on Firefox 43.0</li>
  </ul>
  
  <p>Details:</p>
  
  <p>Hi, </p>
  
  <p>I've encountered a problem while trying to handle click event in jQuery mobile when using a radio element inisde a table tag. The html code below shows how the DOM element looks like. You could see that the radio is inside the th tag and of course it is inside the table header tag. (#order_title)</p>
  
  <pre><code>    &lt;table class="w3-table w3-bordered w3-striped w3-border w3-hoverable" id="order_list" &gt;
      &lt;tr class="order_title" order_id="1"&gt;
          &lt;th&gt;a&lt;/th&gt;
          &lt;th&gt;b&lt;/th&gt;
          &lt;th&gt;
              &lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
                  &lt;input name="sumshare_switch1" id="viewsum1" class="button_viewsum" type="radio" checked&gt;
                  &lt;label for="viewsum1"&gt; summary &lt;/label&gt;
                  &lt;input name="sumshare_switch1" id="calshare1" class="button_calshare" type="radio"&gt;
                  &lt;label for="calshare1"&gt; calculate &lt;/label&gt;
              &lt;/fieldset&gt;
          &lt;/th&gt;           
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I've bounded two click events with the order_title as below: </p>
  
  <pre><code>$('.button_calshare').on( "click", function(e){   
   //do something(A)
   e.stopImmediatePropagation();
  });
  
  $('.order_title').on("click", function(e){  
      //do something(B)
  });
  </code></pre>
  
  <p>I anticipated that when the user click on the radio button with class "button_viewsum", 
  it should first trigger the event from $('.button_calshare'), then stopped by the stopImmediatePropagation function. Expected result is "something(A)" only. </p>
  
  <p>However, when I tested on it, it turns out that result is "something(B) --> something(A)"</p>
  
  <p>I searched for this problem, however, all I found is that in jQuery, event should bubble up as I expected. </p>
  
  <p>My current solution is to use "a" tag to replace radio </p>
  
  <pre><code>&lt;fieldset data-role="controlgroup" data-type="horizontal"&gt;
      &lt;a href="#" data-role="button" data-transition="fade" class="button_viewsum ui-btn-active" order_id="1"&gt;a&lt;/a&gt;
      &lt;a href="#" data-role="button" data-transition="fade" class="button_calshare" &gt;b&lt;/a&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>and the event started to bubble instead of capture! 
  (Namely, only "Something(A)" happened, B is stopped by the stopPropagation function! )</p>
  
  <p>Though my implementation problem is solved, I would really like to know why does the radio button doesn't work like I expected.</p>
  
  <p>Thanks in advance!</p>