按钮重定向到不同的页面答案

【问题标题】：Button redirecting to a different page按钮重定向到不同的页面
【发布时间】：2015-11-18 13:27:37
【问题描述】：

html

<body>
    <div class="mainWrapper">
        <div class="newWrapper">

            <form id="newform" method="post" action="new.php">
                <div class="textboxContainer">
                    <input id="question" type="text" name="question" placeholder="Question..." /><br /><br />
                    <input type="text" name="ans1text" placeholder="Answer 1..." value=""/><br />
                    <input type="text" name="ans2text" placeholder="Answer 2..." value=""/><br />
                    <input type="text" name="ans3text" placeholder="Answer 3..." value=""/><br />
                    <input type="text" name="ans4text" placeholder="Answer 4..." value=""/><br />
                </div><br /><br />

                <div class="doubleButtonContainer">
                <button class="moreAnswersButton" href="javascript:void(0)" name="more_answers" onclick="showAllAnswers()">More...</button>
                <input type="submit" class="button" name="submit" value="Finish" /><br />
               </div>

            </form>

        </div>

    </div>
</body>
</html>

jQuery

function showAllAnswers()
{
    console.log("WHAT IS GOING ON?????");
    $(".textboxContainer").append("<input type='text' name='ans5text' placeholder='Answer 5...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans6text' placeholder='Answer 6...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans7text' placeholder='Answer 7...' value=''/><br />");
    $(".textboxContainer").append("<input type='text' name='ans8text' placeholder='Answer 8...' value=''/><br />");
    $(".moreAnswersButton").remove();
}

由于某种原因，<button> 正在重定向到另一个页面。我觉得这可能与它位于 HTML 帖子表单中有关，但我不知道为什么当我已经分配了提交按钮时它会重定向。

我正在寻找的最终结果是“更多...”按钮向表单中添加了 4 个文本框。我用 jquery 代码做这个 html 编辑。

如何解决此问题并让我的应用正常运行？

【问题讨论】：

How to prevent buttons from submitting forms的可能重复

标签： javascript jquery html forms button

【解决方案1】：

如果您没有为<button> 标记提供明确的“类型”属性，则类型默认为“提交”。给它type="button" 覆盖该默认值。

具有显式或隐式类型“提交”的<button> 的行为与“提交”<input> 标记完全相同。

【讨论】：

【解决方案2】：

默认按钮行为是提交。您需要通过设置按钮 type = "button" 或将 return false; 放在 showAllAnswers(); 之后的 onclick 事件中来覆盖它。

【讨论】：