入力メソッドを切り替える模擬チャットボット？

Question

私は作成したチャットボットを作成してユーザーのユーザー名を要求し、それを変数として保存します。しかし、私のダイアログツリーの1つでは、ユーザーに別の回答を入力するように依頼する必要があります。ユーザーがボタンをクリックしてナビゲートできるようにしています。

ユーザー名のキャプチャでは、「入力バー」がコントロールから削除され、各メッセージ機能とともにボタンが追加されます。私はこれを逆にしようとしましたが（ボタンを削除して入力を追加すると動作しますが）、何かをするために自分の入力を得ることはできません。それは入力時に提出されません、それは変数を保存しませんし、私の試行錯誤で、私はそのmsg値からvarを設定しようとすると、それはユーザー名を更新することがわかりました。ここで

は、ここで名前

function get_username() { 
    send_msg("Hello I'm Mumbles, the Help Bot", function(){ 
    send_msg("Who am I speaking with today?") 
    }); 
} 

function ai(msg) { 
    if (username.length < 3) { 
    username = msg; 
      send_msg("Nice to meet you"+username+". What are you working on today?" , function() { 
      $("#controls").append(
       '<button class="options one" value="my_certifications" type="button">My Certifications</button>' + 
       '<button class="options one" value="videos"type="button">Videos</butto/>' + 
       '<button class="options one" value="login"type="button">Login</butto/>' + 
       '<button class="options one" value="other"type="button">Other</butto/>' 
      ); 
      }); 
     } 
     // Remove text bar 
     $("#controls").empty(); 

}; 

を取得するために私の関数である私の機能を使用すると、この動作を確認したい場合は

} else if (b_val == "my_practicum") { 
     send_msg("What is the email address you submitted your practicum with? By having this we can give you a status update!" , function() { 
      $("#controls").append(
         '<textarea id="message" class="practicum-bar" placeholder="Type Your Name - Then Hit Enter"></textarea><button style="display:none;" id="sendMsg">Send</button>'     ); 
       email = msg; 
     console.log(email); 
     }); 
    } 
} 

メールをしようとしてキャプチャすることです、ここで私のJSFiddle。あなたは>認定>マイ実習>メール

を入力し、この上の任意のヘルプは高く評価されている名前を入力し、このユーザーのパス

を経て、それを見ることができます！ありがとう！

Answer 1

$("#controls").empty();を実行してcontrolsを削除し、動的に作成された要素にイベントを追加して、.onの2番目のパラメータにコンテキストを追加する必要があるようです。今すぐ見てくださいyou can see the console.log in the fiddle jqueryが今すぐアイテムを検出できるので、Enterをクリックした2回目。

$("#controls").on("keypress", "#message", function(event){ 

if (event.which == 13) { 
     console.log("my test"); 
     if ($("#slideThree").prop("checked")) { 
     $("#sendMsg").click(); 
     event.preventDefault(); 
     //*edit you can now change variables outside of scope* 
     } 
    } 
}); 

これでイベント処理を行うことができます。