jquery bind event

Question

html:

<ul>
    <li><input type="submit" id="myId" value="someVal"/>
</ul>

jQuery

$('ul').find('input[type="submit"]').click(function{
         alert('nasty alert')
         $(this).attr('id','newId');
});

$('input#newId').click(function(){
          $(this).hide();
});

ok, so my intention is to change the id after one click and then the button to do something else(hide). i tried with live() too. In firebug it looks like the id has changed but my second click on the button triggers the same alert('nasty alert'). And something strange...if i use live(), on mouse right click the button dissapears (like it should). any sugestions? thanks

Answer 1

You're basically attaching a click event handler twice to the same input.

There's no reason you should attach two event handlers, I've updated the code so a variable is used to keep track.

Edit: Fixed syntax error and now it's using .data

<ul>
<form>
<input type=submit value=go>
</form>
</ul>
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js></script>
<script>


    $('ul').find('input[type="submit"]').click(function() {
             if ( !$(this).data('_clicked') ) {
                 alert('nasty alert')
                 $(this).attr('id','newId');
                 $(this).data('_clicked', true);
             } else {
                 $(this).hide();
             }
             return false;
    });
</script>