jQuery blur() and click()

8
votes

I have the following jQuery functions:

  1. Submits the form

    $(".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 entry button

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

  3. Makes the textarea smaller 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 make an entry:

  • Click in the field (focus event), the field grows larger and shows the entry button
  • Enter text
  • Click on the entry button first time: Now the blur event fires which makes the field smaller again but the click event doesn't fire
  • If I click the button again the form does submit

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

You can find a fiddle of the problem here. When you press the button with the field focused, it blurs the field but doesn't enter it. When you press the button with the field blurred the entry does get submitted.

Any ideas?

5
jquery
Could you set up a jsfiddle demonstrating the problem? – Snuffleupagus

5 Answers

2
votes

Your issue is that click fires on the button on mouseup, however when you change the height, that makes it to where your mouse is no longer on the button when the mouseup happens. Use mousedown instead of click and then trigger('blur') on the textarea to make both events happen.

Note: you still need a click event in there just so you can return false to cancel out the default form submission functions.

fiddle

2
votes
$('.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.
1
votes

Here the problem is the blur event, which works faster than the click event. That is why it makes the field smaller instead of submitting the form first.

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
});
0
votes

It looks like changing the height and forcing a reflow cancels the click event. The easiest solutions are either to use mousedown rather than click (it fires before blur) or wrap the css change in a setTimeout.