form submit jQuery function doesn't work in js file

Question

i have a MVC View when i use form sumbit function inside my view its work fine. but when i put my code insde the js file its stop working

why is that? and is there a solution?

<script type="text/javascript" src="@Url.Content( "~/Scripts/site/js.js" )" ></script>
@using( Html.BeginForm( "Index" , "Sample" , FormMethod.Post , new { id = "frm" } ) )
{
    <div>
        <p>
            <input type="text" id="username" name="username" />
        </p>
        <input type="submit" value="Save" />
    </div>
    <script type="text/javascript">
        $('form').submit(function ()  // or $('#frm').submit
        {
            alert('1');
            return false;
        });
    </script>
}

Answer 1

In your external file, try wrapping it in a $(document).ready(); call. So

$(document).ready(function() {
    $('#frm').submit(function ()
        {
            alert('1');
            return false;
        });
    });

Also, I assume this is obvious, but remove the inline JS, too, when using the external js. :-)