javascript - jqueryを使用してテキストエリアの値を取得するのが難しい

Question

私は次のものを持っています：

<div class="tab-pane" id="message">
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
    <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
    <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

追加すると：

if($(this).is(":contains(Cancel)"))  {

    var text= $("#send_message").val();

    log.console(text)

私は正しい値を取得します

行を次のように変更すると:

    var text= $(this).find("#send_message").val();

undefined がコンソールに記録されます。どうしてこれなの？

完全な jQuery 関数は次のとおりです。

$(function(){
    $('#message').on("click", "a", function(){

        if( $(this).is(":contains(OK)") ) {

            console.log("im in OK!!");
        }
        else if( $(this).is(":contains(Cancel)") )  {

        //  var text= $("#send_message").val();
            var text= $(this).find("#send_message").val();
            console.log(text);
            console.log("im in cancel!!");
        }
    });
});