jQuery blur()和click()

Question

我有以下jQuery函数:

1)提交表格

$(".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)放大表格并显示输入按钮

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

3)使textarea更小并隐藏按钮

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

当我尝试输入时会发生这种情况:

• 单击字段(焦点事件),字段变大并显示输入按钮
• 输入文字
• 首次单击输入按钮:现在模糊事件会触发,这会使字段再次变小,但点击事件不会触发
• 如果我再次单击该按钮,则表单会提交

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

你可以在这里找到问题的小提琴.当您按下按下该按钮的按钮时,它会使该区域模糊但不会输入该区域.当您按下按钮并且字段模糊时,该条目会被提交.

有任何想法吗？

提前致谢!

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.