CODEWITHSUNDEEP
javascriptjqueryjquery-events
christo16
christo16

Reputation: 4843

Focusout only when another element not clicked

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

alt text

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?

Upvotes: 5

Views: 5637

Answers (3)

Shawn Chin
Shawn Chin

Reputation: 86974

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

Proof of concept here: http://jsfiddle.net/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.

Upvotes: 6

rterrani
rterrani

Reputation: 526

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

Upvotes: 0

Dr.Molle
Dr.Molle

Reputation: 117354

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

Upvotes: 8

Related Questions