JQuery：表单元素中的 appendTo() 不起作用

Question

我正在尝试创建一个页面，其中用户在三个单独的文本区域中输入的文本将被提取并插入到第四个文本区域中，该文本区域是在单击按钮时生成的。目前我正在试验一个简单的版本，由于某种原因无法在单击 'Generate' 按钮时生成此附加文本区域。最让我困惑的是，如果我注释掉 <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>

Answer 1

您的 submit 按钮将在（成功）附加元素后非常快速地提交表单。使用 preventDefault()

阻止表单提交

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

http://jsfiddle.net/pL3L2not/

Answer 2

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

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

Fiddle

JQuery：表单元素中的 appendTo() 不起作用

JQuery : appendTo() within Form element not working

jquery

appendto