Question

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?

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.