JQuery blur () and hit ()

Question

I have the following jQuery functions:

1) Gives shape

$(".content").delegate('.entryButton','click', function() { var form = $(this).closest("form"); var id = form.attr('id'); var text = form.find("textarea").val(); Sijax.request('add_entry', [id, text]); //Prevent the form from being submitted (default HTML) return false; }); 

2) Enlarge the form and show the enter button

 $("textarea").focus(function() { $(this).css('height', '80px'); var button = $(this).parent().next().children(); button.css('visibility', 'visible'); button.css('height', '20px') }); 

3) Reduces the size of the text field and hides the button

 $("textarea").blur(function() { $(this).css('height', '30px'); var button = $(this).parent().next().children(); button.css('height', '0px') }); 

This happens when I try to record:

• Click in the field (focus event), the field becomes larger and shows the enter button
• Enter text
• Press the enter button for the first time: Now the blur event fires, which makes the field smaller, but the click event does not fire
• If I click the button again, the form will submit

I think this means that the blur and click event interfere with each other?

You can find the script problems here . . When you press a button with a focused field, it blurs the field, but does not. Enter it. When you press the blurred button, the recording is sent.

Any ideas?

Thanks in advance!

Answer 1

 $('.entryButton').on('click', function (e) { return false; // to prevent default form post }); $("form").delegate('.entryButton','mousedown', function() { $('textarea').trigger('blur'); var form = $(this).closest("form"); var id = form.attr('id'); var text = form.find("textarea").val(); $("#test").append(text); //Prevent the form from being submitted (default HTML) return false; }); 

and keep the focus and blur function as before.

 thanks. 

Answer 2

The problem is that click fires when the mouseup button is clicked, however when you change the height, it causes your button to no longer be on the button when mouseup occurs. Use mousedown instead of click and then trigger('blur') in textarea to do both events.

Note: you still need the click event so that you can return false to cancel the default form submission function.

fiddle

Answer 3

The problem here is the blur event, which is faster than the click event. This is why it makes the field smaller, and not the form in the first place.

You only need to change the first line from click to mousedown :

 $(".content").delegate('.entryButton','mousedown', function() { // your code }); 

Or:

 $(".content").bind('mousedown', function() { // your code }); 

Answer 4

It was convenient for me to use http://api.jquery.com/unbind/

Answer 5

It seems that changing the height and forcing the reflow cancels the click event. The simplest solutions are to either use mousedown and not click (it fires before blur) or wrap the css change in setTimeout .