创建 HTML 表单并返回用户输入的 JavaScript 函数答案

【问题标题】：JavaScript function that creates HTML form and returns user input创建 HTML 表单并返回用户输入的 JavaScript 函数
【发布时间】：2012-11-02 01:52:34
【问题描述】：

我想创建一个 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 pausing execution of function to wait for user input。恐怕我只是无法很好地理解这些响应以使其适应我的特定情况。也许有人可以建议如何这样做，或者从头开始也可以。

【问题讨论】：

您实际上并没有从您的 getInput() 函数返回任何内容，您只是创建了一些 HTML 并绑定了一个函数。
是的 - 我知道 - 抱歉，如果我不清楚，这正是我的问题，所写的 fn 没有返回任何内容，因为它在完成你提到的事情后立即返回......我想要什么是让它在单击按钮之前不返回，在这种情况下它会返回一些有意义的东西。

标签： javascript forms return wait

【解决方案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);

【讨论】：

谢谢！我想我明白了，这看起来正是我所需要的。

【解决方案2】：

我认为您正在寻找的是事件委托，使用事件委托您可以在将按钮添加到表单之前绑定您的函数到您的#mybutton。

例如使用.on()

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

事件委托背后的基本思想是利用 JavaScript 事件冒泡这一事实，因此您要做的是将事件绑定到 DOM 中的 higher 元素，然后检查查看它的来源，只要在您绑定事件时存在更高级别即可。

【讨论】：

发帖人正试图从点击中获取输入，就像使用 prompt() 一样。它与绑定事件无关。