我的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按鈕不斷刷新瀏覽器

回答

相關問題