Перезагрузка страницы после нажатия на кнопку скрытия элемента

Question

Подскажите, пожалуйста. Мне надо чтобы при нажатии на кнопку Hide, элемент скрывался, а при нажатии на кнопку Show, появлялся. У меня раньше всё работало, а сейчас вдруг перестало. При нажатии на любую из этих кнопок, страница перезагружается. Вот мой jquery код:

    $(document).ready(function(){
                    $("button").click(function(){
                        $("div").toggle();
                    });
                });
    
                    $("button").click(function(){
                        $("div").fadeIn();
                        $("div").fadeIn("slow");
                        $("div").fadeIn(3000);
                    });

А вот HTML код:

    <body>
        <form>
        
            <button id="hide">Hide</button>
            <button id="show">Show</button>

                <div aria-expanded="true" role="dialog" aria-modal="true" class="vm--modal"
             style="left: 1px; width: 700px; height: auto; top: -400px;">
                        <div class="ctg-modal__wrapper">
                    <div class="ctg-modal__head"><span>Введите UUID предмета</span>
                        <div class="ctg-modal__close"><span class="ol-ico ol-ico--fa ol-ico--thm-times"></span></div>
                    </div>
                    <div class="ctg-modal__body">
                        <div>Введите UUID предмета и нажмите на кнопку "Check"</div>
                        <section>
                            <div class="row justify-content-between">
                                <div class="col-12 col-sm-auto mt-20 ol-modal-buttons">
                                    <button class="ol-btn ol-w-100 ol-minw-140  ol-btn--thm-dark ol-btn--outline"><span class="">Закрыть</span>
                                    </button>
                                </div>
                                <div class="col-12 col-sm-auto mt-20"><a href="ССЫЛКА"
                                                                         class="ol-btn ol-w-100 ol-minw-140  ol-btn--thm-dodger-green"
                                                                         target="_blank"><span class="">Check</span></a></div>
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
        </form>
    </body>

Answer 1

По-умолчанию для элемента типа button установлен тип submit. Поэтому отправляется форма.

Решение проблемы:

либо ставить принудительно атрибут type=button для тега button
либо в JS писать e.preventDefault()
либо использовать другой html элемент, например div
либо не оборачивать всё в тег form. Потому что непонятно зачем он в данном случае))

Answer 2

Когда вам нужно повесить событие на элемент, используйте его id вместо имени тэга - это позволит избежать подобных ошибок

        $(document).on("click", "#hide", function(){
            $(".vm--modal").toggle();
        });

        $(document).on("click", "#show", function(){
            $(".vm--modal").fadeIn();
            $(".vm--modal").fadeIn("slow");
            $(".vm--modal").fadeIn(3000);
        });

БЛОГ НА HUSL

Перезагрузка страницы после нажатия на кнопку скрытия элемента

Ответы (2 шт):