title: Why stopPropagation() helps when registered on $(document)?
body: <p>So the problem is that one of my click events was firing twice for no good reason. Here is the function</p>
  
  <pre><code>function submitVoteFormOnClick() {
      $(document).off('click', '.vote-form');
      $(document).on('click', '.vote-form', function (e) {
          e.stopPropagation();
          var $arrow = $(e.target);
          $arrow.siblings('.vote-value').val($arrow.data('value'));
          console.log('my click');
          console.log(e.timeStamp);
          console.log($arrow);
          $arrow.closest('form').submit();
      });
  }
  </code></pre>
  
  <p>So I added the stopPropagation after too much time out of despair, and it worked, and I don't understand why!! Where does it propagate if it is registered on the document? Anyone can explain?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is also the necessary mark-up</p>
  
  <pre><code>&lt;div id='page-wrapper'&gt;
    &lt;div class='bottom-index-part'&gt;
      &lt;div class='index'&gt;
        &lt;div class='event-body'&gt;
          &lt;div&gt;
            &lt;div&gt;
              &lt;div class='event-times'&gt;
                &lt;div id='EventTime-17'&gt;
                  &lt;span class='vote-form'&gt;
                      &lt;form method="post" data-remote="true" accept-charset="UTF-8" action="/votes/30" data-toggle="tooltip" id="edit_vote_30" title="" class="form-inline vote-form" data-original-title="1"&gt;
                      &lt;input type="hidden" id="vote_value" name="vote[value]" value="1" class="vote-value"&gt;
                      &lt;input type="hidden" id="vote_votable_type" name="vote[votable_type]" value="EventTime"&gt;
                      &lt;input type="hidden" id="vote_votable_id" name="vote[votable_id]" value="17"&gt;
                      &lt;i data-value="1" class="fa fa-caret-up clickable submit-up-vote active"&gt;&lt;/i&gt;
                      &lt;i data-value="-1" class="fa fa-caret-down clickable submit-down-vote "&gt;&lt;/i&gt;
                      &lt;/form&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>