<form>禁用我的JavaScript代码

Question

我创建了一个小程序来发展自己的感觉，但是有一个问题。 一切正常，直到使用<form>标记为止，JavaScript完全停止运行。

 var tytul = document.getElementById("k-title"); var opis = document.getElementById("k-description"); var popup = document.getElementById("info_box"); var overlay = document.getElementById("overlay"); var podsumowanie = document.getElementById("summary"); $("#add").on("click", function() { var id = $(".wiersz").length; $('#tabela').append('<tr class="wiersz"><td class="komorka-lewa"> <input id="cecha_' + id + '" type="text" placeholder="Cecha produktu"> </td><td class="komorka-prawa"><input id="cecha-opis_' + id + '" type="text" placeholder="Opis cechy produktu"></td></tr>'); document.getElementById("default-table").style = "display: none"; }); $("#add_photo").on("click", function() { var sciezka = prompt("Podaj link do zdjęcia"); var opis = prompt("Podaj opis zdjęcia dla wyszukiwarek"); $("#gallery").append('<div class="photo-container"><button class="del">Usuń zdjęcie</button><img src="' + sciezka + '" class="photo" alt="' + opis + '"/></div>'); if ($(".photo").length > 0) { document.getElementById("default-gallery").style = "display: none"; } $(".del").on("click", function() { $(this).parent().css("display", "none"); document.getElementById("default-gallery").style = "display: block"; }); }); $("#gen").on("click", function() { if (opis.value.length < 1 || tytul.value.length < 1) { popup.style = "display: block"; overlay.style = "display: block"; document.getElementById("infobox-content").innerHTML = "Uzupełnij wszystkie potrzebne dane, zanim wygenerujesz kartę produktu."; } else { popup.style = "display: block"; overlay.style = "display: block"; document.getElementById("infobox-content").innerHTML = "Karta została wygenerowana, plik z kodem znajduje się w katalogu generate."; podsumowanie.innerHTML = "Tytuł: " + tytul.value + "<br>" + "Opis produktu: " + opis.value + "<br>" + "Cecha produktu: " + cecha + "<br>" + "Opis cechy produktu: " + cechaopis; } }); $("#close").on("click", function() { popup.style = "display: none"; overlay.style = "display: none"; }); 

 body { margin: 0; font-family: 'open sans', sans-serif; font-size: 15px; } .wiersz { background-color: #eee; margin: 0; } #tabela {} .komorka-lewa { padding: 3px 10px; text-align: right; border-right: 1px solid #dbdbdb; } .komorka-prawa { padding: 3px 10px; text-align: left; } #tabela { font-size: 14px; border: none; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; width: 100%; } .cecha, .cecha-opis { border: 0; margin: 0; background: 0; } #gen { display: block; width: 100%; margin-top: 10px; } #add, #gen, #add_photo { border: 0; padding: 10px; background: #222; color: #fff; border-radius: 3px; font-family: 'open sans', sans-serif; font-size: 15px; } #add:hover, #gen:hover, #add_photo:hover { background: green; cursor: pointer; transition-duration: 1s; } #container { max-width: 1050px; margin-left: auto; margin-right: auto; } #overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 2; position: absolute; } #info_box { background: #fff; position: absolute; z-index: 3; width: 500px; top: 50%; transform: translateY(-50%); padding: 10px; padding-top: 0; left: 50%; margin-left: -250px; } #info_box p:first-child { font-size: 20px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; } #info_box, #overlay { display: none; } #info_box>p span { cursor: pointer; color: red; } .photo { display: block; width: 100%; } .photo:first-child { margin-top: 25px; } .photo:last-child { margin-bottom: 25px; } #default-gallery { font-size: 14px; border-bottom: 1px solid #dbdbdb; padding: 5px; } .photo-container { position: relative; overflow: hidden; margin-bottom: 25px; } .photo-container:first-child { margin-top: 25px; } .photo-container:last-child { margin-bottom: 25px; } .del { position: absolute; bottom: 50px; right: 25px; background: transparent; border: 3px solid #fff; padding: 10px; font-family: 'open sans', sans-serif; font-size: 15px; color: #fff; border-radius: 3px; } .del:hover { background: #fff; cursor: pointer; transition-duration: 0.5s; color: #222; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="info_box"> <p>Informacja <span id="close" style="float: right;">x</span></p> <p id="infobox-content"></p> </div> <div id="overlay"></div> <div id="container"> <form method="post" action=""> <div style="padding-top: 50px; padding-bottom: 50px;"> <input type="text" value="" id="k-title" placeholder="Tytuł karty" style="display: block; width: 100%; font-size: 30px; border: 0; background: 0; margin-bottom: 25px; text-align: center;"> <input type="text" value="" id="k-description" placeholder="Krótki opis" style="display: block; width: 100%; border: 0; background: 0; text-align: justify; padding: 10px;"> </div> <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Specyfikacja techniczna</div> <table id="tabela" border="0" cellspacing="0" cellpadding="5px"> <tbody> <tr> <td colspan="2" id="default-table">Brak dodanej specyfikacji</td> <tr> </tbody> </table> <button style="margin-top: 25px; margin-bottom: 25px;" id="add">Dodaj wiersz</button> <div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Galeria zdjęć</div> <div id="default-gallery">Brak dodanych zdjęć</div> <div id="gallery"> </div> <button style="margin-top: 25px; margin-bottom: 25px;" id="add_photo">Dodaj zdjęcia</button> <input id="gen" type="submit" value="Generuj kartę" /> </div> </form> <div id="summary"> </div> 

jsfiddle

Answer 1

只需更改按钮元素代码的这一部分

<button style="margin-top: 25px; margin-bottom: 25px;" id="add">Dodaj wiersz</button>

至：-

<button style="margin-top: 25px; margin-bottom: 25px;" id="add" type="button">Dodaj wiersz</button>

如果我们在按钮上使用javascript，则类型属性按钮是必需的，否则默认情况下它作为表单标签中的提交按钮

Answer 2

关键是，在表单内部，如果未定义按钮的类型，则第一个按钮被视为提交按钮。

最好总是明确指定按钮类型。

所以代替

<button ...></button

采用

<button type="button" ...></button>