JQuery: appendTo() внутри элемента Form не работает

Я пытаюсь создать страницу, на которой текст, введенный пользователем в трех отдельных текстовых областях, будет извлечен и вставлен в четвертую текстовую область, которая создается при нажатии кнопки. В данный момент я экспериментирую с простой версией и по какой-то причине не могу сгенерировать эту дополнительную текстовую область при нажатии кнопки "Создать". Больше всего меня озадачивает то, что он отлично работает, если я закомментирую элементы < 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>
Источник

2 ответа

Решение

Используйте event.preventDefault() в вашем контексте. это предотвращает действие по умолчанию, иначе ваша страница должна быть перенаправлена

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

скрипка

Источник

Ваш submit Кнопка отправит форму очень быстро после (успешно) добавления элемента. Запретить отправку формы с помощью preventDefault()

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

http://jsfiddle.net/pL3L2not/

Источник
Другие вопросы по тегам