Question

Please look at this fiddle:

http://jsfiddle.net/uNbYu/1/

When the submit button is pressed once, It removes the text edit for no apparent reason, but doesn’t do anything, but the second time, it does work when pressed, and goes to the page.

Please help me with what makes this code do that.

Thanks

---

HTML:

<b class = "edit" id = "fooo"> FOO </b>

JS:

$('b.edit').click(function() {
    $(this).hide().after('<form action = "foo.php" method = post><input hidden name = "field" type = "text" value = "' + this.id + '"/><input type="text" name = "period" class="editP" value="' + $(this).html() + '" /><input type = "submit" value = "Submit!!" /></form>');
    $('.editP').focus();
});
$('.editP').live('blur', function() {
    $(this).hide().prev('b.edit').html($(this).val()).show();
});

Answer 1

The problem is that the edit box loses focus before you manage to click the button thus changing the position so that you won’t hit the button.