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 pausing execution of function to wait for user input。我担心我根本无法理解这些反应，以使其适应我的具体情况。也许有人可以建议如何这样做，或者从头开始也可以。

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了。

JavaScript函数，用于创建HTML表单并返回用户输入

2 个答案: