Question

昨天我在这个页面上工作，我发现了一些奇怪的JQuery行为。对于下面的表单，页面将正确加载结果的元素，然后稍后刷新一小部分到其默认状态。

我还应该注意到我正在使用JQuery版本1.10.2

<form id="scoreCheck">
    <p>
        <label for="score">Score:</label>
        <input type="text" id="score" />
    </p>
    <p>
        <input type="button" id="validateScore" value="Check it" />
    </p>
    <p id="answer">The result will go here when the button is pressed.</p>
</form>

和JS / JQuery函数（删除正文以保存大小）

$('#validateScore').on('click', function(){
    var scoreInput = Number($("#score").val());

...
...
...

if(tempScore != scoreInput){
    $("#answer").html("<p id='#result'>Invalid Score</p>");
}
    else{
        $("#answer").html("<p id='#result'>Valid Score</p>");
    }
});

这是某种错误还是我在与按钮元素交互时错误地使用了JQuery？谢谢！

Answer 1

这应该可以阻止这种情况发生：

$('#validateScore').on('click', function(e){
    e.preventDefault();
    var scoreInput = Number($("#score").val());

Answer 2

这是因为如果按钮位于表单内，则默认行为为submit.And如果指定其类型，则其行为类似于普通按钮。

Answer 3

看到背后的原因是，当你使用input type ='button'时，你会从输入类型='submit'中区分它，如果是＆lt;按钮＆gt;如果它在表单内部是默认行为，现在使用＆lt;按钮＆gt;或输入类型=提交按钮，你需要防止它的默认行为，请阅读本文

http://api.jquery.com/event.preventdefault/

JQuery - 使用<button>时页面重置，但</button>工作正常

3 个答案: