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。

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

4 个答案: