jQuery的模糊（）和點擊（）

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

發生這種情況時，我試圖讓一個條目：

• 點擊在該領域（focus事件），現場變得更大，並顯示輸入按鈕
• 輸入文本
• 點擊進入按鈕第一時間：現在模糊事件觸發至極讓現場再次小，但單擊事件不火
• 如果我點擊一次按鈕的形式提交不

我認爲這意味着模糊和點擊事件互相干擾？

你可以找到問題here的小提琴。當您按下焦點領域的按鈕時，它會模糊區域但不會進入。當您按下字段模糊的按鈕時，該條目將被提交。

任何想法？

在此先感謝！

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

它看起來像改變高度和強制迴流取消點擊事件。最簡單的解決方案是使用mousedown而不是點擊（它在模糊之前啓動）或將css更改包裝在setTimeout中。

Answer 3

你的問題是，click火上mouseup的按鈕，但是當你改變高度，以至於讓到你的鼠標不再是按鈕時mouseup發生。在textarea上使用mousedown代替click，然後使用trigger('blur')使兩個事件都發生。

注意：您仍然需要一個click事件，因此您可以使用return false來取消默認的表單提交功能。

fiddle

Answer 4

這裏的問題是blur事件，其工作比click事件更快。這就是爲什麼它使字段更小而不是首先提交表單。

你只需要在第一線改變從click到mousedown：

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

或者：

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

Answer 5

我發現自己使用舒適http://api.jquery.com/unbind/