JavaScript函數，用於創建HTML表單並返回用戶輸入

Question

我想創建一個JavaScript函數，它將創建一個HTML表單並返回用戶輸入表單的輸入。 我愚蠢的第一次嘗試是這樣的：

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

result = getInput();

alert( result );

（實際情況比較復雜，用戶必須首先輸入一些文本，然后在幾個不同的按鈕之間進行選擇，返回值取決於輸入的文本和所選按鈕，但我認為這些是外圍問題，所以我把它們排除在外）。 如果我按照書面形式運行，我會得到警告“未定義”，我想要的是警告“結果”。 基本上我希望函數不會返回，直到它被明確告知這樣做。 有沒有辦法實現這個目標？ 如果沒有，那么與上述相似的最簡單的解決方法是什么？

這里提出了一個非常相似的問題： JavaScript暫停執行函數以等待用戶輸入 。 我擔心我根本無法理解這些反應，以使其適應我的具體情況。 也許有人可以建議如何這樣做，或者從頭開始也可以。

Answer 1

不可能以這樣的形式等待用戶輸入。 您需要將其分為兩部分來處理異步請求。

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);

Answer 2

我認為您所尋找的是事件委托，使用事件委派，您可以在將按鈕添加到表單之前將您的函數綁定到#mybutton 。

例如使用.on（）

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

事件委托背后的基本思想是利用JavaScript事件冒泡的事實，所以你要做的是將事件綁定到DOM的更高元素，然后檢查它來自哪里，只要更高您綁定事件時存在級別OK。