Question

我试图在HTML表单上创建一个按钮，向表单添加元素：

＆＃13;

function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    input.setAttribute("type", "Textbox");
    var time=document.createElement('input');
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}
function addRow(){
    console.log("z");
    var routes = document.getElementById("routes");
    routes.appendChild(createRow());
    return false;
}

＆＃13;

<form id="routes">
    <button onclick="addRow()">+</button>
</form>

＆＃13;

但是在每个按钮上单击页面重新加载，并在url中添加问号。我找到了一对想法：

的preventDefault（e）中
return false

但没有效果。

请告诉我该怎么办？还有一些条件：

这不是提交按钮，稍后会添加
要求保持尽可能简单，界面不是项目的主要焦点

Answer 1

button的默认行为是提交。指定type=button，它将覆盖此默认行为。

<button type="button" onclick="addRow()">+</button>

Answer 2

return false函数应为addRow()。另外return false需要<form id="routes"> <button onclick="return addRow()">+</button> </form>：

2017-03-07T18:06:54.958796+00:00 heroku[web.1]: Process running mem=701M(136.4%)

2017-03-07T18:06:54.958796+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)

Answer 3

好的，有一个在事件监听器上使用preventDefault的例子。

 function createRow(){
    var row = document.createElement('div');
    var input=document.createElement('input');
    var time=document.createElement('input');
    input.setAttribute("type", "Textbox");
    time.setAttribute("type", "Textbox");
    row.appendChild(input);
    row.appendChild(time);
    return row;
}

function addRow(){
    document.getElementById("routes").appendChild(createRow());
}

document.querySelector("button").addEventListener("click", function(event)
{
  event.preventDefault();
  addRow();
});

<form id="routes">
    <button>+</button>
</form>

Answer 4

在表单内部，HTML5按钮元素具有默认的提交类型。如果你给它一个＆＃34;按钮＆＃34;一切正常

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
 <form id="routes">
     <div><button type="button" onclick="addRow()">+</button></div>
 </form>
 <script type="text/javascript">
     function createRow(){
         var row = document.createElement('div');
         var input=document.createElement('input');
         input.setAttribute("type", "Textbox");
         var time=document.createElement('input');
         time.setAttribute("type", "Textbox");
         row.appendChild(input);
         row.appendChild(time);
         console.log(row);
         return row;
     }
     function addRow(){
         console.log("z");
         var routes = document.getElementById("routes");
         routes.appendChild(createRow());
         return false;
     }
 </script>
 </body>
 </html>

Answer 5

将按钮设为id并将preventDefault放入$(document).ready(..)功能

＆＃13;

    $(document).ready(function(){
	
		$( "#routes_button" ).click(function( event ) {
			event.preventDefault();  
		});
	});
	
	function createRow(){
        var row = document.createElement('div');
        var input=document.createElement('input');
        input.setAttribute("type", "Textbox");
        var time=document.createElement('input');
        time.setAttribute("type", "Textbox");
        row.appendChild(input);
        row.appendChild(time);
        return row;
    }
    function addRow(){
        console.log("z");
        var routes = document.getElementById("routes");
        routes.appendChild(createRow());
        return false;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>


<form id="routes">
        <button id="routes_button" onclick="addRow()">+</button>
    </form>

＆＃13;

如何在非提交按钮单击表单后限制页面重新加载？

5 个答案: