他の関数から呼び出されたときに関数が失敗する

Question

jQueryにはかなり新しいので、私に同行してください。

ある関数の結果を別の関数に渡すのに問題があります。

次に、テキストをvarとして関数populateMessage（）に渡し、テキストをテキストボックスに書き込みます。

私はテキストを取得できますが、それはpopulateMessage関数に渡されますが、関数は決して完全に実行されず、テキストボックスにはデータが入力されません。私がdocument.readyでpopulateMessage関数をラップし、.text（ 'test'）のようなものを書かせると、それが動作します。

どうすればこの作品を作成できますか？ヘルプ

$(document).ready(function() { 
    getClickedInvite(); 
}); 

//gets clicked item template and sends it to message box 

function getClickedInvite() { 
    $('.card').click(function() { 
     var selectedMessage = $(this).text(); 
     alert(selectedMessage); 
     populateMessage(selectedMessage); 
    }); 
} 

function populateMessage(selectedMessage) { 
    alert(selectedMessage + ' has been sent to the message box ') 
    var inviteMessageBoxId = $('#inviteMessageBox').find('textarea').attr('id'); 
    alert(inviteMessageBoxId); 
    $('#' + inviteMessageBoxId).text(selectedMessage); 
} 

Answer 1

ため

おかげでそのように機能を拡張する必要はありません。あなたがmanualを読めば、それは言う

は、セレクタ、jQueryオブジェクト、または要素によってフィルタリングマッチした要素の現在のセット内の各要素の子孫を取得します。

SO .find()常に単一の要素を返しません。

$('#inviteMessageBox').find('textarea')[0].text(selectedMessage); 

または、idを得ることが本当に必要であるならば、

var id = $('#inviteMessageBox').find('textarea')[0].attr('id'); 
$("#"+id").text(selectedMessage); 

Answer 2

jQueryのは、あなたがこのような何かにあなたの populateMessage機能を変更することができるように、「ID」で、すべてを参照する必要はありません

：あなたはすべての要素にクリックイベントをバインドしようとしているときので

function populateMessage(selectedMessage) { 
    $('#inviteMessageBox') 
     .find('textarea') 
     .text(selectedMessage); 
} 

Answer 3

$(document).ready()後に呼ばれる理由はこれだけの作品がありますクラス.cardの場合、実際にはページには存在しないため、バインディングは失敗します。

$(document).ready();の後にDOMが完全に書かれていると、すべての要素がページ上にあり、それらにバインドされるイベントを受け入れる準備ができていると確信できます。

これを回避する最良の方法は、ドキュメントがそうのように、準備ができている知っていれば、すぐにあなたの関数を定義し、要素にバインドすることです：

function sayHello() { 
    alert('hello'); 
} 

$(document).ready(function() { 
    $('.button1').click(sayHello); 
    $('.button2').click(sayHello); 
    $('.button3').click(sayHello); 
}); 

この方法は非常にクリーンなコードを維持する必要があります。すべての関数を最初に参照し、最後にイベントをバインドします。