0

我有一个简单的按钮，它的 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);
});

这是我的两个主要功能。

4

4 回答 4

4

当您单击按钮时，您的表单似乎正在发布。为了防止这种情况发生添加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);
});
于 2013-10-21T22:30:56.787 回答
3

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

于 2013-10-21T22:32:28.473 回答
1

如果您的按钮属于“提交”类型，则会发生这种情况。返回 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();一旦您真正准备好提交它，您将不得不手动调用。

于 2013-10-21T22:30:40.963 回答
1

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

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

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

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

于 2013-10-21T22:31:16.870 回答