Question

我想学习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>

非常感谢提前！

Answer 1

这是因为按钮元素的type属性的默认值是＆＃34;提交＆＃34;。

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

解决方案：

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

Answer 2

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

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

执行简单查询代码时不需要的页面刷新

2 个答案: