нежелательное обновление страницы при выполнении простого кода запроса

Я хочу изучить jQuery, но не могу понять, почему моя страница продолжает обновляться сразу после завершения события клика.нежелательное обновление страницы при выполнении простого кода запроса

Целью этого кода является изменение фона DivResult. Это работает за несколько секунд до обновления страницы. Я попробовал это на разных браузерах и на разных компьютерах, поэтому я думаю, что это что-то с моим кодом.

Это мой JQuery код:

$(document).ready(function(){ 
    $('#button').on('click',function(){ 
     var kleur = "#" +$('#text').val(); 
     $('#DivResult').css({'background-color': kleur}); 
    }); 
});

и это мой HTML-файл:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <script src="jQuery_JavaScript_Library_v1.11.3.js"></script> 
    <script src="script.js"></script> 

    <link href="style.css" rel="stylesheet"> 

    <title></title> 
</head> 
<body> 
    <form> 
     <input type="text" id="text"> 
     <button id="button">button</button> 
    </form> 
    <div id="DivResult">&nbsp;</div> 
</body> 
</html>

Большое спасибо заранее!

источник

2015-05-15 user3660959

это 1000000-й дубликат http://stackoverflow.com/q/18575623/1845408, все еще люди быстро отвечают на вопросы, чтобы получить очки репутации. – renakre

Этот вопрос касается щелчка элемента 'a', а не представления' form', как в этом случае. –

Это потому, что значением по умолчанию для атрибута типа элементов кнопки является «отправить».

источник: Can I make a <button> not submit a form?

Решение:

<form> 
     <input type="text" id="text"> 
     <button type="button" id="button">button</button> 
    </form>

источник

2015-05-15 14:03:30 fozzeuh

вопрос потому, что button щелчок подачи form, что делает страницы появляются, чтобы обновить. Чтобы решить эту проблему, вы должны подключиться к событию submit формы и использовать preventDefault(), чтобы остановить отправку формы. Попробуйте следующее:

$('form').on('submit', function(e) { 
    e.preventDefault(); 
    var kleur = "#" + $('#text').val(); 
    $('#DivResult').css({ 'background-color': kleur }); 
});

источник

2015-05-15 14:06:59

нежелательное обновление страницы при выполнении простого кода запроса

ответ

Смежные вопросы