FancyBox refreshing on every click [duplicate]

Question

This question already has an answer here:

• fancybox bug with trigger click 4 answers

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>

Answer 1

When you do this

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

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();

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>