单击按钮时,页面将返回历史记录

Page go back in history when button clicked

本文关键字:返回 历史 记录 按钮 单击      更新时间:2023-09-26

我有一个包含 5 个单选按钮的垂直无序列表,每 2 分钟生成一次动态文本。

<ul id="answerswers_ul">
                                <li><input class="alternative-letter" id="r1" name="r1" type="radio"><div class="answerswers_letters">A</div><label class="res1" for="r1"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
                                <li><input class="alternative-letter" id="r2" name="r1" type="radio"><div class="answerswers_letters">B</div><label class="res2" for="r2"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
                                <li><input class="alternative-letter" id="r3" name="r1" type="radio"><div class="answerswers_letters">C</div><label class="res3" for="r3"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
                                <li><input class="alternative-letter" id="r4" name="r1" type="radio"><div class="answerswers_letters">D</div><label class="res4" for="r5"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
                                <li><input class="alternative-letter" id="r5" name="r1" type="radio"><div class="answerswers_letters">E</div><label class="res5" for="r5"></label><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg></li>
                            </ul>

问题如下。我在下面添加一个按钮

<button class="clean_question"></button>

当类被命名时,按钮的功能是清除单选按钮的答案(如果选中)。但是当我点击它时,页面加载了历史记录中的上一页!这真是太疯狂了。

我将粘贴与clean_question按钮相关的JS和CSS

.CSS

button.clean_question{
 background-color: #292f33;
 border: 1px solid #55acee;
 width: 60px;
 height: auto;
 margin-top: 5px;
 border-radius: 50%;
 margin-left: -34px;
 float: left;
 padding: 10px 12px;
 z-index: 100;
 position: absolute;
 transition: 0.3s;
 -webkit-transition: 0.3s;
}
button.clean_question:hover{
 transform: scale(1.1,1.1);
}
button.clean_question:before{
 content: url(../images/Examen_Botones_Clean.svg);
}

和 JS

    function resetRadio(el) {
    [].slice.call($('input[type="radio"][name="' + el.getAttribute('name') + '"]')).forEach(function(el) {
        var path = el.parentNode.querySelector('svg > path');
        if (path) {
            path.parentNode.removeChild(path);
        }
    });
}

jQuery('button.clean_question').on('click', function(){
    console.log('llegaste');
    selectsArr.forEach(function(obj,i) {
        [].forEach.call(obj.inputs,function(el){
            if (el.getAttribute('type') === 'radio')
                resetRadio(el);
        })
    });

请尝试哟帮助我,我真的被这个问题困住了。

<button type="">属性默认为 submit

https://www.w3.org/TR/html/forms.html#attr-button-type

因此,默认情况下单击它将提交表单。默认情况下,表单目标与页面相同,这会导致重新加载。使用<button type="button">来避免这种情况。