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);

因此，当我点击我的输入按钮上的提交时，我希望看到＆＃34;按钮点击＆＃34;。使用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

1 个答案: