4

HTML フォームを作成し、ユーザーがフォームに入力した内容を返す JavaScript 関数を作成したいと考えています。私の愚かな最初の試みは次のようなものでした：

function getInput() {
    $('#somediv').html( "<input type='button' id='mybutton' name='Click Me'></input>" );
    $('#mybutton').click( function() { return "result"; } );
}

result = getInput();

alert( result );

（実際の状況はもっと複雑です。ユーザーは最初にテキストを入力してから、いくつかの異なるボタンから選択する必要があり、戻り値は入力されたテキストと選択したボタンによって異なりますが、それらは周辺の問題だと思うので省略しました）。これを記述どおりに実行すると、アラート「結果」が必要な場合に「未定義」というアラートが表示されます。基本的に、明示的にそうするように指示されるまで、関数を返さないようにしたいのです。これを達成する方法はありますか？そうでない場合、上記と精神的に似ている最も簡単な回避策は何ですか?

非常によく似た質問がここで提起されました: JavaScript が関数の実行を一時停止して、ユーザー入力を待ちます。残念ながら、特定のケースに適応させるのに十分なほど応答を理解できませんでした。おそらく、誰かがその方法をアドバイスするか、ゼロから始めることもできます。

4

2 に答える 2

2

そのような形でユーザーの入力を待つことは不可能です。非同期リクエストを処理するには、2つの部分に分割する必要があります。

function getInput(callback) {
    $('#somediv').html( "<input type='button' id='mybutton' name='Click Me'></input>" );
    $('#mybutton').click( function() { callback("result"); } );
}

function processInput (result) {
    alert(result);
}

getInput(processInput);
于 2012-11-02T02:27:12.453 に答える
1

あなたが探しているのはイベント委任だと思います。イベント委任を使用すると、ボタンがフォームに追加される前に関数をバインドできます。#mybutton

たとえば、.on()を使用して 

 $(document).on('click', '#mybutton', function() {
  //your code here
});

イベント委譲の背後にある基本的な考え方は、JavaScript でイベントがバブルアップするという事実を利用することです。そのため、イベントを の上位の要素にバインドし、上位レベルの要素であるDOM限り、イベントがどこから発生したかを確認します。イベントをOKにバインドした時点で存在します。

于 2012-11-02T02:41:56.580 に答える