我的HTML5按钮不断刷新浏览器

Question

我有一个简单的按钮，它有一个点击事件绑定到它的 ID。 此按钮从滑块中检索值，然后将其输出到嵌套在段落中的<span>。 问题是，当按下按钮时，页面会刷新，所以我在一瞬间看到该值，然后它消失了。 在现实世界中，我希望当所有值都提交到服务器时发生这种情况，但现在我只需要在单击按钮时不刷新页面：

// Output to the value of slider one
$("#slider01").on('mousemove', function(evt) {
    var sliderValue = $(this).val();
    $("#value").text(sliderVal);
});
// Retrieve the value from slider one
$("#submit").on("click", function(evt) {
    var sliderValue = $('#slider01').val();
    $("#output > p").append(sliderValue);
    //alert("The value of slider 1 is: " + sliderValue);
});

这是我的两个主要功能。

Answer 1

当您单击该按钮时，您的表单似乎正在发布。 要防止这种情况发生，请添加evt.preventDefault()

$("#submit").on("click", function(evt) {
  evt.preventDefault();
  var sliderValue = $('#slider01').val();
  $("#output > p").append(sliderValue);
  //alert("The value of slider 1 is: " + sliderValue);
});

Answer 2

您正在单击的按钮是什么类型？对于type="submit"按钮，刷新是它应该执行的操作。你可能想尝试一个简单的type="button"，至少在你达到你真正希望提交发生的地步之前。

Answer 3

如果您的按钮类型为"提交"，则会发生这种情况。返回 false 以防止表单继续提交：

$("#submit").on("click", function(evt) {
    var sliderValue = $('#slider01').val();
    $("#output > p").append(sliderValue);
    //alert("The value of slider 1 is: " + sliderValue);
    return false;
});

然后，一旦您实际准备好提交它，您就必须手动调用$('form').submit();。

Answer 4

要在单击按钮时不重新加载页面，请使用以下命令：

$('button').click(function () {
  return false;
}

其次，如果你使用的是jQuery的ajax请求，你也可以尝试在success函数中使用它。

第三，代码是什么？我确定有一个表单和input[type="submit"]按钮，它将整个页面发送到服务器。删除它并使用简单的button。