JQuery click function not working on button within parent element which has it's own click function
<p>I have a button which needs to run a javascript function when clicked.</p>

<p>The problem is that this button lives within another element which has it's own click function which seems to be preventing that of the button from running.</p>

<p>Here's the code:</p>

<pre><code>         &lt;a id="login"&gt;Login
            &lt;span&gt;
                &lt;span style="display:block; padding:0 0 5px 0;"&gt;
                    content here...
                &lt;/span&gt;
                &lt;input type="button" id="forgotten" value="test" /&gt;
            &lt;/span&gt;
         &lt;/a&gt;
</code></pre>

<p>And here's the javascript:</p>

<pre><code>$("#login").click( function() {
    $("#login &gt; span").slideDown();
});
$('body').click( function() {
    if ($("#login &gt; span:visible")) {
        $("#login &gt; span").slideUp();
    }
});
$('#login, #login &gt; span').click( function(event){
    event.stopPropagation();
});

$("#forgotten").live("click", function() {
    // ... Run function here...
});
</code></pre>

<p>I have a feeling it might be because of the stopPropagation part of the code.</p>

<p>Any ideas?</p>
