protectDefault не работает [дубликат]

На этот вопрос уже есть ответ здесь:

JS & jQuery не может обнаружить html-элементы и сказать, что они не определены 4 ответа

У меня проблема с функцией protectDefault. Не работает Вот мой файл JS:

(function() {
    var app = {
        initialize : function () {
            this.setUpListeners();
        },
        setUpListeners: function () {
            $('form').on('submit', app.submitForm);
        },
        submitForm: function(e){
            e.preventDefault();                
        }
    }

    app.initialize(); 
}());

Мой HTML-код имеет 2 кнопки подтверждения. Второй шаг скрыт и должен отображаться, когда будет сделан первый шаг. Но я не могу по крайней мере добавить предотвращение дефолта для первого шага.

Вот мой HTML:

<form id="login">
    <!-- #first_step -->
    <div id="first_step">

        <h1>Registration Form</h1>
        <fieldset id="inputs">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" name="username" id="username" class="form-control" placeholder="Create a username" required="">
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" name="password" id="password" class="form-control" placeholder="Create a password" required="">
            </div>

            <div class="form-group">
                <label for="cpassword">Password</label>
                <input type="password" name="password" id="cpassword" class="form-control" placeholder="Confirm your password">
            </div>
        </fieldset>

        <fieldset id="actions">
            <div class="form-group">
                <input type="submit" class="submit" name="submit_first" id="submit_first" value="Next">
            </div>
        </fieldset>
    </div>

    <!-- #second_step -->
    <div id="second_step">
        <h1>Registration Form</h1>
        <fieldset id="inputs">
            <label>Name</label>
            <input type="text" name="name" id="firstname" class="form-control" placeholder="Enter your name" autofocus="" required="">

            <label>Surname</label>
            <input type="text" name="surname" id="lastname" class="form-control" placeholder="Enter your last name" required="">

            <label>Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Enter your email" required="">
        </fieldset>

        <fieldset id="actions">
            <input  class="submit" type="submit" name="submit_second" id="submit_second" value="Next">
        </fieldset>
    </div>
</form>

Мне жаль. Я просто новичок в JS и буду очень благодарен, если кто-то поможет мне

Ответы на вопрос(1)

Ваш ответ на вопрос