title: jQuery / JavaScript Bubbling and stopPropagation doesn't work
body: <p>I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.</p>
  
  <pre><code>$('.edit').click(function(event){
   //more code...
      modal_submit(the_id);
      event.stopPropagation();
  });
  </code></pre>
  
  <p>and then the submit event:</p>
  
  <pre><code>function modal_submit(the_id){
  $('#modal form').submit(function(){
      //This will alert every time I have EVER clicked on an edit button
      alert(the_id);
      return false;
  });
  </code></pre>
  
  <p>}</p>
  
  <p>finally all of this is inside of a getScript:</p>
  
  <pre><code>$.getScript('js/edit.js',function(){
  create_edit_btn();
  </code></pre>
  
  <p>});</p>
  
  <p>I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.</p>
  
  <p>Does anyone have any ideas? :\</p>
  
  <p>EDIT:</p>
  
  <pre><code>the html is: 
  &lt;li&gt; 
    &lt;input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting"&gt;  
      &lt;p&gt;Hosting for your web site&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>