Live（）でscrollイベントをバインドする方法は？

Question

しばらく前に私はwanted his textarea to growの誰かの問題を解決しました。私は領域のscrollとkeyupイベントを待ち受け、行数を再計算する関数を作った。別のプロジェクトでコードを使用したかったのですが、問題があります。この問題を解決するには、bindの代わりにliveを使用しているので、将来の領域もバインドされます。

今私は、liveがbindよりずっと遅く実行されることを発見しました。私はa simplified example on jsFiddleを作成しました。上部のテキストエリアは、私が望むように動作しますが、新しく追加されたテキストエリアは遅れてのシグナリングによってちらつきます（私はChromeを使用しています）。

bindと同じ速さでliveを作成するにはどうすればよいですか？ scrollはliveステートメントでは使用できません。 liveにscrollを有効にする方法はありますか？新しいTextAreaが追加されたことを伝えてくれるjQueryイベントがあるので、バインドを使用して新しく作成した要素にscrollを追加できますか？

私はあなたのアイデアを楽しみにしています。

EDIT：コードへのリンクが変更されました。削除されたscrollingCode。別のテキストエリアを作成するためのボタンを追加しました。問題は「スクロール」と関係があります。それは発砲しない。

説明：私はどの機能がテキストエリアを作成するのか分かりません。動的に追加されたボックスには、のChromeが点滅しています。将来の読者のために

：click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, and mouseup：jQueryの1.3.xので

はJavaScriptのみのイベント（ カスタムイベントに加えて）次 は .live（）で結合することができます。 .live（）メソッド は、jQuery 1.4の として、カスタムイベントだけでなく、すべての JavaScriptイベントをサポートしています。 現在jQuery 1.4.1でもフォーカスとぼかし作業 ライブ（詳細 へのマッピング、適切な、バブリング、イベントfocusin とフォーカスアウト）。 jQuery 1.4.1以降、 ホバーイベントを指定することができます（ をmouseenterとmouseleaveにマッピングします。 はmouseoverにマッピングされ、 mouseoutにマッピングされます）。

Answer 1

答えは簡単です。 scrollは、サイズ変更の最初の瞬間に起動するため、ちらつきを防止するものです。しかし、scrollはliveで効果がありません（バブルしないので）、新しく作成されたテキストエリアはkeyupにサイズ変更されますが、後で発生します（したがって、点滅します）。

更新：もちろん私はあなたの問題を解決することもできます。あなただけのポイントは、それがbindとliveをミックスし、ある[Demo]

$('textarea.autoresize').live('keyup', function() { 
    var el = $(this); 
    if (!el.data("has-scroll")) { 
     el.data("has-scroll", true); 
     el.scroll(function(){ 
      resizeTextArea(el); 
     }); 
    } 
    resizeTextArea(el); 
}); 

:) を依頼する必要があります。すべての要素で発生するkeyupイベント（liveのため）は、一意のscrollイベントを条件付きで追加します。

アップデート2：ああ、あなたの全体のサイズ変更コードが良いように記述することができますによって：

// resize text area (fixed version of Pointy's) 
function resizeTextArea(elem) { 
    elem.height(1); elem.scrollTop(0); 
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height()) 
}​ 

Answer 2

Try this (JSFiddle):

$('#Add').click(function(){ 
    var id = "newtextarea"+Math.floor(Math.random()*1000); 
    $('#pane').append($('<textarea class="new" rows="1" cols="40" id="'+id+'"></textarea><br/>')); 
    $('textarea:last').focus(); 
    bindAgain(id); 
}); 

//inital resize 
resizeTextArea($('#tst')); 

//'live' event 
$('textarea.new').bind('keyup scroll', function() { 
    resizeTextArea($(this)); 
}); 

function bindAgain(id) 
{ 
    $('#'+id).bind('keyup scroll', function() { 
    resizeTextArea($(this)); 
}); 

} 

基本的には、動的に作成されたIDを使用してイベントを再バインド。 karim79のソリューションほどエレガントではありませんが、機能します。

Answer 3

私は重要な何かが起こるたび、私は呼んでカスタムイベントにバインドします。このように：

$(body).live('MyCustomEvent', function() { 
    $("#MyScrollItem").scroll(function() { 
     // Do things here 
    } 
}); 

短くて甘い。

Answer 4

私はこの問題の解決策を見つけました。問題は、.liveとスクロールがうまく動作しないことです。

私の解決方法は、バインドイベント..とタイムアウトを使用することです。タイムアウトはDOM時間を更新するようにします。

下のコードは、ページの下にスクロールしたときにコンテンツを読み込むために使用されます。 setTimeoutとバインドを見てください。

$('.list').bind("scroll",function(){ 
    $('.list').height())); 
    if($('.list').scrollTop() >= ($('.list').height()+ $(window).height())){   
     setTimeout(function(){ //Time out is used as there is a possibility that 
     last_function(); 
     },200); 
    } 
});