jQuery - ユーザーがテキストエリアのコンテンツを編集したイベント

Question

私はjQueryを使用してプロジェクトのリストを繰り返します。すべてのプロジェクトが画面に表示され、ドラッグ可能です。また、非常にプロジェクトにはテキストエリアがあります。

ソースコード：

$.each(data, function(id, project) { 
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>'); 
}); 
$(".note").draggable({ 
    containment: "#projects", 
    scroll: false 
}); 

私が欲しいもの、ユーザーがプロジェクトのテキストを変更するかどうかを知ることですので、私はカーソルがテキストエリアを離れたかどうかを知る必要があります。そして私は新しいテキストとデータプロジェクトIDを知る必要があるので、新しいテキストをバックエンドシステムにあるデータベースに保存することができます。

ご協力いただきありがとうございます。

Answer 1

あなたは、ユーザーが<textarea>要素の内容を編集した場合、textarea.edit要素でchangeイベントをリッスン#projects要素にa .delegate()ハンドラを置くかを知りたいと言っている場合。

$('#projects').delegate('textarea.edit','change',function() { 
    alert('was changed'); 
}); 

これは、ページが読み込まれたときに一度だけ実行します。 #projectsコンテナに追加するすべての<textarea>要素に対して機能します。

Answer 2

テキストの変更は、onchangeイベントが発生すると、カーソルがそれを離れたとき、onblurイベントがトリガされます。

$('.edit').change(function(){ 
    alert(this.value); 
}); 

$('.edit').blur(function(){ 
    // cursor left text area 
}); 

Answer 3

あなたが探しているイベントが.blur（である）、このイベントは、ときに実行されます要素はフォーカスを失います。

$.each(data, function(id, project) { 
    $('#projects').append('<div class="note" data-projectid="'+project.id+'"><textarea class="edit">'+project.text+'</textarea></div>'); 
    $('textbox').blur(function() { 
     $(this).val(); //gives you the current value of the box. 
     //then do what you need with that info. also the project obj is still available to get project.id from 
     var data-projectid = project.id 

    }); 
});