When the user focuses on a certain element, I display a save button. On focusout, I remove the save button.

The user can submit the input by either hitting return or click save. When they click the save button, the input loses focus and the save button is removed, thus not registering the click. Can I tell in the focusout, if the save button has been clicked?

Within my focus function I do something like this:

        $('#save_button').click(function(){
            saveEditingField(this); //save input
            $('#save_button').die("click");
        });

        $('.editing').focusout( function(e) {
            $('#isediting').attr('value','false');
            $('#edit_controls').remove()
        });

I've tried adding a delay to the remove(), but when tabbing between inputs it shows multiple save buttons (while the others are being removed).

Any ideas?

When the user focuses on a certain element, I display a save button. On focusout, I remove the save button.

The user can submit the input by either hitting return or click save. When they click the save button, the input loses focus and the save button is removed, thus not registering the click. Can I tell in the focusout, if the save button has been clicked?

Within my focus function I do something like this:

        $('#save_button').click(function(){
            saveEditingField(this); //save input
            $('#save_button').die("click");
        });

        $('.editing').focusout( function(e) {
            $('#isediting').attr('value','false');
            $('#edit_controls').remove()
        });

I've tried adding a delay to the remove(), but when tabbing between inputs it shows multiple save buttons (while the others are being removed).

Any ideas?

• javascript
• jquery
• jquery-events

• would it help to use .hide() instead of .remove() ? – Shawn Chin Commented Nov 18, 2010 at 11:52
• Even with hide it will hide the element before registering the click. – christo16 Commented Nov 18, 2010 at 12:05

3 Answers 3

I think you only need a little timeout between focusout and removing/hiding the button.

You can check if the mouse is over the button on focusout before hiding the button.

Proof of concept here: http://jsfiddle/dnsEM/

A minor issue with this implementation is that the save button doesn't disappear if the input box looses focus while the mouse is over the button and only gets hidden on mouse out.

Creates a div containing both elements (The input text and the button) and bind the focusout event to that div