jQuery stop event propagation - more than once
<p>I am trying to write a form that sends a JSON request to the server when a button on the form is clicked. I want to disable the default form behaviour so that clicking the button is what will do the job of sending an email address. The idea is to return a message from the server back to the form (if an error), or to replace the form with a success message (on success).</p>

<p>This is what I have so far (snippet):</p>

<pre><code>&lt;div&gt;
    &lt;br /&gt;
    &lt;div class="row"&gt;
        &lt;div id="invite-member"&gt;
            &lt;p&gt;Enter your email:&lt;/p&gt;
            &lt;div class="no-show error-msg"&gt;&lt;/div&gt;
            &lt;form id="frm-invite" method="post" autocomplete="off" action='www.example.com/backend.php' accept-charset="UTF-8"&gt;
                &lt;div class="input-append"&gt;
                    &lt;input type="text" placeholder="Enter Email" class="input-long"&gt;
                    &lt;button id="btn-invite" class="btn btn-primary btn-success" type="submit"&gt;Add me »&lt;/button&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    $("#btn-invite").click(function(e){
        alert('Woohoo');
        e.stopPropagation();
    });
});
&lt;/script&gt;
</code></pre>

<p>The first time the page is loaded, the button behaves as expected. The subsequent times though (without reloading the page), the event binding seems to have been 'broken' and the browser wants to go to www.example.com/backend.php.</p>

<p>Why is that?.</p>
