jQuery&Backbone点击事件不触发

我知道这个问题出现了一百万次,但我已经通过了答案,没有一个帮助.

JS小提琴：http://jsfiddle.net/ZrYYy/

var LoginView = Backbone.View.extend({

    initialize: function () {

        console.log('Login View Intialized');
        this.el = $('#login-container');

    },// Setup the events (mainly the login)
    events: {

        // Login - function
        "click #login-btn" : "checkLogin"

    },// Actually authorization function
    checkLogin: function() {

        console.log("Authorizing login details with server...");

    }

});

// Get it all up and going
var newLogin = new Login();
var loginView = new LoginView({model: newLogin});

在小提琴中,当我绑定一个正常的$(‘#login-btn’).click();事件它工作正常,虽然它不在我自己的设置(与铬).骨干点击事件无效.

这是标题在我自己的代码上

<link href="assets/admin/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<link href="assets/admin/css/style.css" rel="stylesheet" type="text/css">
<script src="assets/admin/js/jquery-1.9.1.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="assets/admin/backbone/login.js"></script>
<script src="assets/admin/js/bootstrap.min.js"></script>

我知道最好的做法是将它们包括在页脚中,但是现在这个问题存在,这并不重要(？).

解决方法

您正在设置View元素：

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.el = $('#login-container');
  }
});

每个Backbone视图都会创建一个独立的DOM节点作为它的el.当您这样设置this.el时,Backbone不知道您已经更改了元素,并且仍在侦听原始分离节点上的事件.

尝试在视图上声明一个el属性.这是将视图绑定到预先存在的元素的正确方法：

var LoginView = Backbone.View.extend({
  el: "#login-container",});

如果您需要在视图生命周期内动态设置视图的el,则应使用view.setElement,这将使Backbone将事件绑定到新元素：

var LoginView = Backbone.View.extend({
  initialize: function() {
    this.setElement($('#login-container'));
  }
});

根据评论进行编辑：听起来您正在尝试在页面完全加载之前初始化视图. Backbone找不到#login-container元素,ergo不绑定事件.您也可以用你的小提琴来验证这一点：将onLoad设置更改为No wrap< in head>在小提琴设置中,并且看不到任何事件被处理.

您应该只有在DOM准备好之后初始化您的应用程序：

$(document).on('ready',function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});

或快捷方式相同：

$(function() {
  var newLogin = new Login();
  var loginView = new LoginView({model: newLogin});      
});