JQuery / JavaScript bubbling and stopPropagation not working

Question

I make an edit button that issues a modal block with a form for editing it. JQuery then submits this form to my server and I get a JSON response. However, due to my problem with the bubbles, if I click, for example, all the edit buttons, and then click on the last and change the field, it does this through all of them.

$('.edit').click(function(event){
 //more code...
    modal_submit(the_id);
    event.stopPropagation();
});

and then the send event:

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;
});

}

Finally, all this is inside getScript:

$.getScript('js/edit.js',function(){
create_edit_btn();

});

I used it only once and it worked, but I also had to do this.event.stopPropagation, but if I do this, it now says this.event undefined, but as I said, this exact code worked before for another script i did.

Does anyone have any ideas?: \

EDIT:

the html is: 
<li> 
  <input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">  
    <p>Hosting for your web site</p>
</li>

Answer 1

. , $(element).submit(whateverFunction), anyFunction submit. , , , :

function modal_submit(the_id){

$('#modal form').unbind(); // this will remove all other event listeners from this element

$('#modal form').submit(function(){
        //This will alert every time I have EVER clicked on an edit button
        alert(the_id);
        return false;
});

Answer 2

, event.stoppropagation . (.. , ). , , , .

event.stoppropagation(), :

event.preventDefault();

, .

Answer 3

, ?

$('.edit').click(function(event){
 //more code...
        modal_submit(the_id);
        event.stopPropagation();
});

, , . live, , .