javascript - 在 IE 中单击表单按钮后重新加载页面

Question

我的网站有问题。我有一个显示表单的按钮，问题是在 IE 和边缘上，当我单击此按钮时，它会显示表单，但在单击后会自动刷新页面。

我不知道如何解决这个问题。你能帮帮我吗？

这是我的代码 html:

    <div class="col-xs-3" id="div6">
        <div style="text-align: center; color: #333; font-weight:bold;">Actualité</div>
        {% if user.is_authenticated %}
        {% if request.user.is_staff %}
        <form action="#modification">
            <div style="text-align: center;">
                <button type="submit" id="modifier" class="btn btn-primary">Modifier l'actu</button>
            </div>
        </form>
        <form action="#modification" id="formActu" style="display: none" method="post">
            {% csrf_token %}
            <div id="modification"></div>
            <div style="text-align: center;">
                <button type="submit" class="btn btn-success" id="valider" style="margin-top: 1%;">Valider</button>
            </div>
        </form>
        {% endif %}
        {% endif %}
        {% if not actu %}
        <div id="messageNonActu" style="margin-top: 5%;">Pas d'actualité pour le moment !</div>
        {% endif %}
        {% for actuCommentaire in actu %}
        <div id="commentaireActu" style="margin-top: 5%;">{{actuCommentaire.commentaire}}</div>
        {% endfor %}
    </div>

这是我的脚本:

            $(document).ready(function(){
            var compteur = 0;

            $('#modifier').click(function(){
                if(compteur === 0){
                    $('#modification').append('{% for field in form %}<label class="my_class" for="{{ field.name|escapejs }}">{{ field.label|escapejs }} :</label>{{ field|escapejs }}{% endfor %}');
                    $('#formActu').show()
                    $('#exampleTextarea').css({resize: 'none'});
                    $('#commentaireActu').hide();
                    $('#messageNonActu').hide();
                    $('#modifier').removeClass('btn btn-primary').addClass('btn btn-danger');
                    $('#modifier').html("Annuler la modif");
                    compteur++;
                }else{
                    if($('#formActu').is(':visible')){
                        $('#formActu').hide();
                        $('#commentaireActu').show();
                        $('#modifier').removeClass('btn btn-danger').addClass('btn btn-primary');
                        $('#modifier').html("Modifier l'actu");
                    }else{
                        $('#commentaireActu').hide();
                        $('#formActu').show();
                        $('#modifier').removeClass('btn btn-primary').addClass('btn btn-danger');
                        $('#modifier').html("Annuler la modif");
                    }
                }
            });
        });

Image 1 with just button

点击后我预览了第二张图片，但在点击按钮后不到一秒就刷新了页面

Image 2 with form

然后我直接得到第一张图的visual

Answer 1

试试这个并检查:(只需从方法的末尾返回 false 因为 IE 将按钮单击视为提交，这就是您的页面重新加载的原因)

$('#modifier').click(函数(){

//你的逻辑

 return false;