jQuery blur()并单击()

Question

我有以下jQuery函数：

1. 提交表格 $(“.content”).delegate(‘..entryButton’，'click'，函数(){ var form = $(this).closest("form")；var id = form.attr('id')；var text = form.find("textarea").val()；Sijax.request('add_entry'，id，text)； //防止表单被提交(默认HTML)返回false；}；
2. 放大表单并显示输入按钮。 $("textarea").focus(function() { $(this).css('height'，'80px')；var按钮= $(this).parent().next().children()；button.css('visibility'，‘可视’)；button.css(‘高度’，‘20 var’})；
3. 使文本区域变小并隐藏按钮。 $(“textarea”).blur(函数(){$(This).css(‘高度’，‘30 0px’)；var按钮= $(this).parent().next().children()；button.css(‘高度’，'0px') }；

当我尝试输入一个条目时，就会发生这种情况：

• 单击字段(焦点事件)，字段将变大并显示“输入”按钮。
• 输入文本
• 第一次单击entry按钮：现在模糊事件触发，使字段再次变小，但单击事件不会触发
• 如果我再次单击该按钮，表单将提交。

我认为这意味着模糊事件和点击事件相互干扰？

你可以找到一个问题的小提琴这里.当你按下按钮与字段聚焦，它模糊的字段，但没有进入它。当您按下该字段模糊的按钮时，条目将被提交。

有什么想法吗？

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

像以前一样保持焦点和模糊功能。

thanks.

Answer 2

您的问题是click会在mouseup上的按钮上触发，但是当您更改高度时，当mouseup发生时，鼠标就不再在按钮上的位置了。使用mousedown而不是click，然后在textarea上使用trigger('blur')来实现这两个事件。

注意:您仍然需要一个click事件，这样您就可以通过return false取消默认的表单提交函数。

小提琴

Answer 3

这里的问题是blur事件，它比click事件工作得更快。这就是为什么它使字段变小，而不是先提交表单。

您只需要将第一行从click更改为mousedown

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

或者：

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