Fancybox плохо работает с формой внутри

ПРОБЛЕМА:

У меня есть fancybox, который запускается, когда у пользователя не активирована геолокация. Этот fancybox имеет форму внутри, просто вход с двумя кнопками, и я хочу, чтобы пользователь ввел текст, и когда он нажимает какую-то кнопку, просто выполняет какую-то задачу. Все выглядит хорошо, но когда я нажимаю кнопку, я просто вижу ошибку в консоли, и ничего не происходит.

Как я уже сказал, все выглядит хорошо, я вижу в инструментах разработчика, что события объединяются правильно. Другие fancybox не доставляют мне никаких проблем.

КОД:

HTML:

<div id = "modal-info0" style = "display:none" data-fancybox = "">
    <div class = "container noborder">
        <div class = "row hcenter">
            <div class = "col-xs-12 col-sm-8 col-sm-push-2">
                <div class = "alert pad-sm">
                    <i class = "icon-alert icon-lg" aria-hidden = "true"></i>
                    <p class = "title title-sm">Text</p>
                </div>
                <ul class = "grid cols4 insights d-flex flex-justify-content-center" style = "display: none ! important;">
                    <li>
                        <i class = "icon-alert icon-lg" aria-hidden = "true"></i>
                        <p>Text</p>
                    </li>
                </ul>
                <p class = "t-xl vmar-xl">Text</p>
                <form class = "form-border" id = "formBuscadorClinicasDentalesCP">
                    <div class = "row vmar-md">
                        <div class = "col-md-4">
                            <label class = "hright" for = "cp">CP</label>
                        </div>
                        <div class = "form-group col-md-8 col-lg-6">
                            <i class = "icon-location" aria-hidden = "true"></i>
                            <input name = "cp" autocapitalize = "off" autocorrect = "off" type = "text">
                            <div class = "pagination vmar">
                                <ul class = "btns w12">
                                    <li>
                                        <button class = "btn" type = "submit" name = "enviar">
                                            <span>Accept</span>
                                        </button>
                                    </li>
                                    <li class = "">
                                        <button type = "submit" name = "enviar" class = "btn sec pull-right">
                                            <span>Cancel</span>
                                        </button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

JS:

<script>
$(document).ready(function() {
    $.fancybox.open({
        src  : '#modal-info0',
        type : 'inline',
        opts : {
            afterShow : function( instance, current ) {
            console.info( 'done!' );
            }
        }
    });
});

$('#formBuscadorClinicasDentalesCP').on('submit', function (e) {
    alert("IN!");
    return false;
});
</script>

ОШИБКА:

TypeError: r.current.opts.$orig is undefined

ИЗОБРАЖЕНИЕ ОШИБКИ:

Fancybox плохо работает с формой внутри

ДАЛЬНЕЙШАЯ ИНФОРМАЦИЯ

Если я привязываю событие click к кнопке вместо формы, оно срабатывает без проблем. Эта ошибка возникает только в том случае, если я привязываю событие отправки к форме.

Может попробовать сменить type : 'inline' на type : 'html'

Janis 04.02.2019 09:45

Не работает...

Belgarion 04.02.2019 11:04

Ну а так как вы не указали ссылку на живую демку, то помочь совершенно невозможно.

Janis 04.02.2019 11:15

Почему бы вам не использовать codepen для создания «минимального, полного и проверяемого примера»? stackoverflow.com/help/mcve

Janis 04.02.2019 11:51
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
4
45
1

Ответы 1

Наконец я получил решение. Просто удалите data-fancybox="" из div, который вы хотите преобразовать в fancybox, и он будет работать отлично.

Другие вопросы по теме