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

然后我直接获得第一张图片的视觉效果

Answer 1

尝试此操作并检查：（只需从方法末尾返回false ，因为IE认为按钮单击为提交，这就是页面重新加载的原因）

$（'＃modifier'）。click（function（）{

//您的逻辑

 return false;

}

单击IE中的表单按钮后重新加载页面

1 个答案: