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

我有一个简单的按钮，它具有绑定到其ID的单击事件。该按钮从滑块中检索一个值，然后输出到嵌套在段落中的<span>。问题是，当按下按钮时，页面刷新，所以我看到了分秒的值，然后消失。在现实世界中，我会想，当所有的值被提交到服务器，这样的事情发生，但现在我只需要在网页不刷新，当我点击我的按钮：我的HTML5按钮不断刷新浏览器

// 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); 
});

继承人我的两个主要功能。

来源

2013-10-21 user1574598

您可以简单地将输入类型更改为'button'，这样可以避免这个问题:) –

只是想重申像之前提到的@Sergio，你应该通过你的问题并接受和或upvote对你有帮助的答案，你现在有16个问题没有被接受的答案。如果你不接受他们的答案，人们将不太愿意帮助你。 – Trevor

对不起，你的帮助是非常感谢。我已经完成了这方面的必要。 – user1574598

看起来您的表单在您点击按钮时发布。为了防止这种情况发生添加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-21 22:30:56 Trevor

如果您的按钮类型为“submit”，则会发生这种情况。返回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-21 22:30:40 mayabelle

谢谢，这听起来像是一个更好的选择。奇怪的是我删除了'type =“submit”'并用一个普通的按钮替换了它，而且页面仍然清爽。 – user1574598

为了不重装点击按钮的页面，使用此：其次

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

，你也可以尝试在success的功能，使用这个，如果你'使用jQuery的ajax请求。

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

来源

2013-10-21 22:31:16

谢谢，正如你所说的提交按钮是我需要的信息需要发送到服务器时。我用''替换它，但仍然刷新页面，直到我添加了你们建议的必要代码。 – user1574598

你点击的按钮是什么类型？对于type="submit"按钮，刷新是它应该做的事情。您可能想尝试一个简单的type="button"，至少在您确实希望提交发生的时候。

来源

2013-10-21 22:32:28 CDspace

奇怪的是我最初使用的是一个'type =“提交”'，如你所说应该刷新，然后我改变它为一个基本的按钮，并仍然刷新页面。 – user1574598

在React和JSX按钮中工作 – devonJS

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

回答

相关问题