Question

问题：

我有一个fancybox，当用户未激活地理位置时会触发该功能。这个花哨的盒子内部有一个表单，只有一个带有2个按钮的输入，我想做的是让用户介绍文本，当他按下某个按钮时，只需执行一些任务即可。一切看起来不错，但是当我按下按钮时，我只能在控制台中看到错误，什么也没发生。

正如我所说，一切看起来都不错，我可以在开发人员工具中看到事件已正确加入。其他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未定义

错误图像：

Error image

更多信息

如果我将click事件绑定到按钮而不是表单，则触发它没有任何问题。如果我将Submit事件绑定到表单，只会发生此错误。

Answer 1

最后我得到了解决方案。只需从要转换为fancybox的div中删除data-fancybox =“”，它就可以正常工作。

Fancybox不能与内部表单一起使用

1 个答案: