8

我有以下 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").blur(function() { $(this).css('height', '30px'); var button = $(this).parent().next().children(); button .css('高度', '0px') });

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

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

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

你可以在这里找到问题的答案。当您在字段聚焦的情况下按下按钮时，它会模糊该字段但不会输入它。当您按下字段模糊的按钮时，条目会被提交。

有任何想法吗？

4

5 回答 5

2

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

注意：您仍然需要一个click事件，以便您可以return false取消默认的表单提交功能。

小提琴

于 2012-12-26T16:14:20.607 回答
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.
于 2012-12-26T16:30:15.090 回答
1

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

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

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

或者：

$(".content").bind('mousedown', function() {
// your code
});
于 2013-07-08T21:04:41.677 回答
1

我发现自己使用http://api.jquery.com/unbind/很舒服

于 2013-11-21T08:25:12.527 回答
0

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

于 2012-12-26T16:11:38.033 回答