Console.log 在 Backbone 中提交并继续

Question

我的代码中有一个我似乎无法弄清楚的小问题。

  (function($){

        var FormLoanView = Backbone.View.extend({
          tagName: 'div',
          template: _.template('<form> Annual Income: <input></input> <br> Monthly Payment: <input></input> <br> Down Payment: <input></input> <br> APR: <input></input><input type="submit" value="Submit"></form>'),
          initialize: function(){
            var $data = this.$el.html(this.template())
            $('body').html($data)
          },
          events:{
            'submit': 'checking'
          },
          checking: function(){
            console.log("button clicked")
          }


        })


         $(document).ready(function () {

          var LoanView = new FormLoanView({
          });

        });
       })(jQuery);

因此，当我在输入按钮上单击提交时，我希望看到 "button clicked"。使用 chrome 开发人员工具时，我能够看到控制台日志，但由于某种原因它出现又消失。有谁知道为什么会这样？

Answer 1

正如评论已经提到的，您正在捕获提交事件，但您没有阻止其默认行为（向服务器发送 GET 请求并将表单数据附加为参数）。

要停止由于此请求而刷新页面，您可以在 checking() 方法中调用 e.preventDefault()。

    var FormLoanView = Backbone.View.extend({
      ...
      initialize: function(){
        var $data = this.$el.html(this.template())
        $('body').html($data)
      },
      events:{
        'submit': 'checking'
      },
      checking: function(e){
        e.preventDefault();
        console.log("button clicked")
      }
    });

Console.log 在 Backbone 中提交并继续

Console.log comes and goes upon submission in Backbone

javascript

backbone.js