FancyBox刷新每一次点击 [英] FancyBox refreshing on every click

问题描述

我试图用花哨的方式创建一个表单，并且不幸的是，即使它显示输入元素和正确的标记，单击表单中的任何内容都会导致fancybox刷新。我错过了什么，以禁用点击事件的泡沫，所以你实际上可以进入一个文本输入框或选择形式的selectoptions没有花哨的盒子刷新？

I am trying to create a form with fancy box and unfortuantely even though it display the input elements and correct markup, clicking on anything in the form causes the fancybox to refresh. What am I missing to disable the click event bubble so you can actually get into a text input box or select form the selectoptions without the fancy box refreshing?

  $(document).ready(function() {
        var box = $("#show_mailing_list_signup");


        box.fancybox({
            'showCloseButton': true,
            'scrolling': 'no',
            'titleShow': false,
            'beforeLoad': function() {
                return !hideMailList();
            },
            'afterLoad': function() {

                $('#disableSignup').click(function() {
                    setCookie("hideSignup", true, 365);
                    $.fancybox.close();
                    return false;
                });

                $("#send_form").click(function() {

                    return false;
                });


            }
        }).click();
    });


<div id="show_mailing_list_signup">
        <form id="mailinglistForm" method="post">
            <h2>Header</h2>
            <label for="name">* Name </label>
            <p>
                <input name="fname" type="text" id="name" minlength="4" maxlength="15" />
            </p>
            <br />
            <label for="email">* Email </label>
            <p>
                <input name="email" type="text" id="email" />
            </p>
            <br />
            <label for="state">Pick your favorite school</label>
            <p>
                <select id="state">
                    <option>NY</option>
                    <option>IL</option>
                </select>
                <select id="city">
                    <option>Schenectedy</option>
                    <option>Fishkill</option>
                </select>
            </p>
            <p>
                <input id="schoolSearch" type="text"/>
            </p>

            <%--default to the most select school--%>
            <p style="margin-top: 20px;">
                <input value="Join Now" type="button" name="send_form" id="send_form" />
            </p>

        </form>
        <p class="details">blah</p>
        <a href="#" id="disableSignup">don't show again</a>
    </div>

推荐答案

当您这样做时

When you do this

var box = $("#show_mailing_list_signup");
    box.fancybox().click()

元素 < div id =show_mailing_list_signup> （其中包含您在fancybox中打开的表单）成为 触发器 ， target ，那么任何你点击的容器都会触发fancybox。

the element <div id="show_mailing_list_signup"> (which contains the form you open in fancybox) becomes the trigger and the target of fancybox so anything you click inside that container will trigger fancybox over and over again.

将选择器更改为其他内容以将表单定位为您的表单，例如

Change the selector to something else to target your form like

var box = $(".fancybox");
    box.fancybox({
        // API options here
    }).click();

注意：你仍然需要一个html元素（通常是一个链接）与 class =fancybox来定位您的表格，例如：

NOTE: you still need to have an html element (usually a link) with class="fancybox" to target your form like :

<a class="fancybox" href="#show_mailing_list_signup"></a>

这篇关于FancyBox刷新每一次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！