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

私はエントリを作成しようとすると、この問題が発生：フィールドに

• クリック（フォーカスイベント）、フィールドが大きく成長し、エントリーボタン
• は、最初のエントリボタン上のテキスト
• をクリックしてください示し時間：は今、火災がWICH blurイベントは、再びフィールド小さくなりますが、私はボタンをクリックすると、クリックイベントは再びフォーム送信ん
• を発射しない

これは、ぼかしとクリックイベントが互いに干渉していると思いますか？

問題のフィドルは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にラップするのではなく、mousedownです。

Answer 3

mouseupのボタンでclickが発生しますが、高さを変更すると、mouseupが発生したときにマウスがボタンに表示されなくなります。両方のイベントが発生するようにmousedownをclickの代わりに使用し、次にtrigger('blur')をtextareaに使用します。

注：まだclickイベントが必要です。return falseは、デフォルトのフォーム送信機能を取り消すことができます。

fiddle

Answer 4

ここで問題は速くclickイベントよりも動作しますblurイベントです。そのため、最初にフォームを送信するのではなく、フィールドを小さくする理由です。

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

または：：あなたが唯一のclickからmousedownに最初の行を変更する必要が

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

Answer 5

私はhttp://api.jquery.com/unbind/