执行简单查询代码时不需要的页面刷新[重复]答案

【问题标题】：an unwanted page refresh when executing simple query code [duplicate]执行简单查询代码时不需要的页面刷新[重复]
【发布时间】：2015-05-15 22:10:10
【问题描述】：

我想学习 jQuery，但我不知道为什么我的页面在点击事件完成后会一直刷新。

这段代码的目的是改变 DivResult 的背景。这在页面刷新之前的几秒钟内有效。我在不同的浏览器和不同的计算机上尝试过，所以我认为这与我的代码有关。

这是我的 jQuery 代码：

$(document).ready(function(){
    $('#button').on('click',function(){
        var kleur = "#" +$('#text').val();
        $('#DivResult').css({'background-color': kleur});
    });
});

这是我的 html 文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="jQuery_JavaScript_Library_v1.11.3.js"></script>
    <script src="script.js"></script>

    <link href="style.css" rel="stylesheet">

    <title></title>
</head>
<body>
    <form>
        <input type="text" id="text">
        <button id="button">button</button>
    </form>
    <div id="DivResult">&nbsp;</div>
</body>
</html>

非常感谢！

【问题讨论】：

这是stackoverflow.com/q/18575623/1845408 的第 1000000 次重复，人们仍然快速发布答案只是为了获得声望分。
这个问题是关于a 元素的点击，而不是在这种情况下提交form。

标签： jquery page-refresh

【解决方案1】：

这是因为按钮元素的type属性的默认值是“提交”。

来源：Can I make a <button> not submit a form?

解决方案：

   <form>
        <input type="text" id="text">
        <button type="button" id="button">button</button>
    </form>

【讨论】：

【解决方案2】：

问题是因为button 点击提交了form，这使得页面看起来正在刷新。要解决此问题，您应该挂钩表单的submit 事件并使用preventDefault() 停止表单提交。试试这个：

$('form').on('submit', function(e) {
    e.preventDefault();
    var kleur = "#" + $('#text').val();
    $('#DivResult').css({ 'background-color': kleur });
});

【讨论】：