骨干js按钮单击事件未触发

Question

我在初始化主路由器时有一个 ajax 函数，这似乎阻碍了signin.js 中我的登录按钮的事件。当我单击登录按钮时，它不会执行其功能，而是浏览器将输入放在 URL 上（即用户名和密码）。 但是当我在initialize上去掉ajax函数后，就可以成功登录了。

我已经包含了一些我正在处理的代码。谢谢

main.js

initialize: function(){
    $.ajax({
      type: "GET",
      url: "something here",
      contentType: "application/json",
      headers: {
          'someVar': something here
      },
      statusCode: {
          404: function() {
              console.log('404: logged out');
              if (!this.loginView) {
                  this.loginView = new LoginView();
              }
              $('.pagewrap').html(this.loginView.el);
          },
          200: function() {
              console.log('200');
              if (!this.homeView) {
                  this.homeView = new HomeView();
              }
              $('.pagewrap').html(this.homeView.el);
          }
      }
    });
  // return false;         
},

signin.js

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function () {
        console.log('signin');
        $.ajax({ ... });
        return false;
    }
});
var toSignin = new SigninView();
window.anotherSigninView = Backbone.View.extend({
    initialize: function() {},
    render: function() {}
});

home.js

window.HomeView = Backbone.View.extend ({
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).html( this.template() );
        return this;
    }
});

一些html

<form id="signin-container">
<table id="tbl-signin">
    <tr>
        <td><div class="input-box"><input class="input-text" type="text" name="username" placeholder="Username"></div></td>
        <td><div class="input-box"><input class="input-text" type="password" name="password" placeholder="Password"></div></td>
        <td><input id="btn-signin" class="button" value="Sign In"></td>
    </tr>
    <tr>
        <td class="opt"><input class="checkbox" type="checkbox" name="rememberMe" value="true"><label class="opt-signin">Remember Me?</label></td>
        <td class="opt"><a class="opt-signin" href="#">Forgot Password?</a></td>
        <td></td>
    </tr>
 </table>
 </form>

Answer 1

您需要在click 处理程序中阻止submit 按钮的默认行为。你可以这样做：

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function (event) {
        event.preventDefault();
        console.log('signin');
        $.ajax({ ... });
    }
});

或者，您可以考虑使用不会尝试提交与其关联的表单的 html button 元素。

Answer 2

好的，我知道你的问题是什么:)

这是一个恢复您的代码jsfiddle.net/26xf4/6 的示例。问题是你没有打电话给new SigninView()； （实例化视图）因此它的事件永远不会被绑定。

因此，在此示例中，尝试取消注释 ligne 43 并且您的代码将按预期工作，因为当您实例化 View (new SigninView()) 时，其构造函数会调用 delegateEvents() 函数（您在代码中看不到这一点，它在backbone.js中）启用您在视图中声明的事件：

events: {
    "click #btn-signin" : "submit"
},

Answer 3

我不知道你的 HTML 模型，我最好的猜测是你在这里捕捉到了不正确的事件。如果您正在提交表单，您应该捕获submit form 事件而不是click #some-button。因为即使你在表单中捕获click 按钮事件并返回false，表单仍然会被提交，因为这是两个不同的事件