I have the following jQuery functions:
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;
});
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') });
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:
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?
$('.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.
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
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With