JQuery：Form元素中的appendTo（）不起作用答案

【问题标题】：JQuery : appendTo() within Form element not workingJQuery：Form元素中的appendTo（）不起作用
【发布时间】：2015-07-07 15:06:43
【问题描述】：

我正在尝试创建一个页面，用户在三个单独的文本区域中输入的文本将被提取并插入到单击按钮时生成的第四个文本区域中。目前我正在尝试一个简单的版本，当单击“生成”按钮时，由于某种原因无法生成这个额外的文本区域。最让我困惑的是，如果我将 form> 和 /form> 元素注释掉，它仍然可以正常工作！

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
            $(document).ready(function(){
                $("#b1").on("click", function(){
                    $("<div><textarea>come on</textarea></div>").appendTo("#why");
                });
            });
            </script>
        </head>
        <body>
            <form action="">
                <div id="why">
                    <textarea name="IWant">why.</textarea>
                </div>
                <div id="what">
                    <textarea name="IWant">what.</textarea>
                </div>
                <div>
                    <button id="b1" type="submit">Generate</button>
                </div>
            </form>
        </body>
        </html>

【问题讨论】：

您的b1 按钮是一个提交按钮，当您单击它时，您正在提交表单并且页面会重新加载。
啊我明白了，这让我很困惑，我现在知道未来了。非常感谢所有这些告诉我这个问题的回复。

标签： jquery appendto

【解决方案1】：

在您的上下文中使用 event.preventDefault()。它会阻止默认操作，否则您的页面应该被重定向

$("#b1").on("click", function(event){
    event.preventDefault();
    $("<div><textarea>come on</textarea></div>").appendTo("#why");
});

Fiddle

【讨论】：

【解决方案2】：

您的submit 按钮将在（成功）附加元素后很快提交表单。使用preventDefault()防止表单提交

$("#b1").on("click", function(e){
     $("<div><textarea>come on</textarea></div>").appendTo("#why");
     e.preventDefault()
 });

http://jsfiddle.net/pL3L2not/

【讨论】：