每次点击都会刷新 FancyBox [重复]答案

【问题标题】：FancyBox refreshing on every click [duplicate]每次点击都会刷新 FancyBox [重复]
【发布时间】：2013-10-21 22:08:16
【问题描述】：

我正在尝试创建一个带有花式框的表单，不幸的是，即使它显示了输入元素和正确的标记，单击表单中的任何内容都会导致花式框刷新。我缺少什么来禁用点击事件气泡，这样您就可以真正进入文本输入框或从选择选项中选择而无需刷新花哨的框？

  $(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>

【问题讨论】：

标签： jquery html fancybox fancybox-2

【解决方案1】：

当你这样做时

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

元素<div id="show_mailing_list_signup">（包含您在fancybox中打开的表单）成为触发器和目标的fancybox，所以你在那个容器中click 的任何东西都会一遍又一遍地触发fancybox。

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

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

注意：您仍然需要一个带有class="fancybox" 的html 元素（通常是链接）来定位您的form，例如：

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

【讨论】：