Question

I am trying to make a form so when user click button then it will submit but the problem is that it is keep getting on function even if I am not pressing submit button. here is my code

$(function () {
var url, container, form,
    View = {
        init: function () {
            container   = $('.container');
            form        = $('.search#form');
            console.log(form);
            View.loadViews();
            $(document).on('submit', '#form', View.findView());
        },
        findView: function () {
            console.log('helllo');
            return false;
        },
        loadViews: function (view) {
            $(container).load('search.html');
        }
    };
View.init();
});

In code above the line $(document).on('submit', '#form', View.findView()); keeps calling findView() method whereas I want to call it when user click submit button. How can I fix this?

Answer 1

When you bind it using $(document).on('submit', '#form', View.findView());, you are essentially calling the function and trying to bind the submit event to what the function returns, which is incorrect. Since findView() is returning false, this is equivalent of saying $(document).on('submit', '#form', false);

You need to bind View.findView() like below:

$(document).on('submit', '#form', View.findView); // note, no () at the end