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

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

单击字段（焦点事件），字段变大并显示输入按钮
输入文字
第一次点击输入按钮：现在模糊事件会再次触发，但点击事件不会触发
如果我再次点击该按钮，表单会提交

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

您可以找到问题的小提示here。当您按下按钮并使该字段聚焦时，它会使该字段模糊但不会输入该字段。当您按下按钮并且字段模糊时，条目就会被提交。

有什么想法吗？

提前致谢！

Answer 1

您的问题是click触发了mouseup上的按钮，但是当您更改高度时，会导致mouseup时鼠标不再位于按钮上发生。使用mousedown代替click，然后使用trigger('blur') textarea来发生这两件事。

注意：您仍然需要click个活动才能return false取消默认表单提交功能。

fiddle

Answer 2

$('.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 3

此问题是blur事件，其效果比click事件更快。这就是为什么它使场变小而不是先提交表格。

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

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

或者：

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

Answer 4

我发现自己习惯使用http://api.jquery.com/unbind/

Answer 5

看起来更改高度并强制重排取消了click事件。最简单的解决方案是使用mousedown而不是点击（它在模糊之前触发）或将{css更改包装在setTimeout中。

jQuery blur（）和click（）

5 个答案: