Question

我有一个主页，当您单击注册按钮时会打开注册表单。当您单击此注册按钮时，我必须在另一个js文件中打开该表单的函数未被调用。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Naperville Central Assassins</title>
    <link rel="stylesheet" href="Assets/Stylesheets/Global/Global.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="Assets/Javascript/Init.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // On Register Click Open Modal
            $('#Register-Action').bind('click', function(){
                // Open The Modal
                modalOpen('Form-Register');
            });
        });
    </script>
</head>
<body>
<div id="Wrapper">
    <header id="Header">
        <div class="Container">
            <a href="#" class="Header-Logo Left"></a>
            <a href="#" class="Header-Link Left Selected">Home</a>
            <a href="#" class="Header-Link Left">Rules</a>
            <a href="#" class="Header-Link Left">Leaderboards</a>
            <a href="#" id="Register-Action" class="Btn Btn-Danger Right">Register</a>
        </div>
    </header>

    <main id="Main">
        <div class="Container">
            Welcome to Naperville Central Assassins 2014!
        </div>
    </main>

    <div id="Form-Register" class="Modal">
        <div class="Modal-Container">
            <a href="#" class="Btn-Close Modal-Toggle"></a>
            <div id="Modal-Register-Form">
                <h1>Register!</h1>
                <form id="Register-Form" method="post" action="#">
                    <fieldset>
                        <p>
                            <legend class="Form-Legend">First Name</legend>
                            <input type="text" name="fname" class="Form-Field" placeholder="First Name" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Last Name</legend>
                            <input type="text" name="lname" class="Form-Field" placeholder="Last Name" />
                        </p>

                        <p>
                            <legend class="Form-Legend">E-Mail</legend>
                            <input type="text" name="email" class="Form-Field" placeholder="E-Mail" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Password</legend>
                            <input type="password" name="password" class="Form-Field" placeholder="Password" />
                        </p>

                        <p>
                            <legend class="Form-Legend">Phone Number</legend>
                            <input type="text" name="pn" class="Form-Field" placeholder="Phone Number" />
                        </p>

                        <p>
                            <legend class="Form-Legend">School ID</legend>
                            <input type="text" name="school_id" class="Form-Field" placeholder="School ID" />
                        </p>

                        <p>
                            <input type="submit" name="submit" class="Btn Btn-Success Left" value="Register" />
                            <button class="Btn Left Modal-Toggle">Cancel</button>
                        </p>

                        <div class="Clear"></div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

JS档案

$(document).ready(function(){
    // Check if Browser is Up To Date.
    if(!("FormData" in window)){
        // Tell the user to use a better browser, or whatever
        alert('Upgrade Your Browser! Some Objects May Not Work.');
    }

    // Stop All Forms From Submitting
    $('form').bind('submit', function(e){
        // Don't Do Anything on Form Submit
        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    // Find Modal Div And Close On X Click
    $('.Modal-Toggle').bind('click', function(){
        var divId = $(this).closest('.Modal').attr('id');
        modalClose(divId);
    });

    // Function That Opens A Modal
    function modalOpen(divId){
        $('#' + divId).fadeIn();
    }

    // Function That Closes A Modal
    function modalClose(divId){
        $('#' + divId).fadeOut();
    }

    // Function That Sends AJAX Data To Server
    function AJAXSend(Type, Page, Data){
        alert(Type);
    }
});

Answer 1

将modalOpen()之类的函数移到dom ready处理程序之外。在另一个函数中定义函数时，只能在该外部函数

中访问已定义的函数

$(document).ready(function () {
    // Check if Browser is Up To Date.
    if (!("FormData" in window)) {
        // Tell the user to use a better browser, or whatever
        alert('Upgrade Your Browser! Some Objects May Not Work.');
    }

    // Stop All Forms From Submitting
    $('form').bind('submit', function (e) {
        // Don't Do Anything on Form Submit
        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    // Find Modal Div And Close On X Click
    $('.Modal-Toggle').bind('click', function () {
        var divId = $(this).closest('.Modal').attr('id');
        modalClose(divId);
    });

});
// Function That Opens A Modal
function modalOpen(divId) {
    $('#' + divId).fadeIn();
}

// Function That Closes A Modal
function modalClose(divId) {
    $('#' + divId).fadeOut();
}

// Function That Sends AJAX Data To Server
function AJAXSend(Type, Page, Data) {
    alert(Type);
}

Javascript函数没有从外部js文件调用

1 个答案: