jQuery & Backbone 点击事件没有触发答案

【问题标题】：jQuery & Backbone click events not firingjQuery & Backbone 点击事件没有触发
【发布时间】：2013-03-01 13:04:48
【问题描述】：

我知道这个问题会出现一百万次，但我已经解决了所有问题，但都没有帮助。

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();事件它工作正常，虽然它不在我自己的设置中（使用 chrome）。主干点击事件不起作用。

这是我自己的代码中的标题

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

我知道将这些内容包含在页脚中的最佳做法，但目前虽然存在此问题，但这并不重要（？）。

【问题讨论】：

chrome开发者控制台有错误吗？
不，没有，直接通过 jQuery 从控制台绑定点击事件似乎有效。我试过使用 .on() 等。它们都不起作用。骨干只是失败了..
<script src="http://documentcloud.github.com/underscore/underscore-min.js"</script> 缺少第一个标签的>
啊，这只是一个格式错误，看看小提琴，这基本上就是我的代码。

标签： jquery events backbone.js

【解决方案1】：

您正在像这样设置 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 能够将events 绑定到新元素：

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

基于 cmets 进行编辑：听起来您正试图在页面完全加载之前初始化视图。 Backbone 没有找到 #login-container 元素，因此不会绑定事件。你也可以用你的小提琴来验证这一点：在小提琴设置中将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});      
});

【讨论】：

这适用于 JSFiddle，但不适用于我的本地代码。这越来越烦人了。 jQuery 点击事件在本地也根本不起作用，我认为这是问题所在？
啊，我分别尝试了这两种方法，但从未一起尝试过，谢谢！
@SamV : 我们可以在路由器中初始化视图而不是在document.ready 中吗？
@Domo 我不知道，我现在使用 Angular 从来没有进入骨干网！打开一个新问题或谷歌:)
@SamV 没关系，亲爱的。谢谢。

【解决方案2】：

我必须在没有 jQuery 的情况下设置 el 才能在 JSFiddle 中工作... el: 'body'

【讨论】：

【解决方案3】：

正如其他答案所解释的，要使 events 工作，您需要使用 el 属性。 el 属性对于通过引用 el 属性中的元素来注册事件是必要的。但在某些情况下，尚未生成 html。在这些情况下，您可以使用tagName 而不是el。 tagName 可用于动态生成元素，就像document.createElement 一样。

【讨论】：

【解决方案4】：

Backbones el Node 定义了视图控制器的工作区。只有 el 内部的节点会受到 Backbones 渲染方法的影响、监听或更改。

将 el 设置为尽可能靠近您希望与您的视图控制器维护的区域，以避免与其他视图控制器相交或不必要的父级。

想象一下 View1 包括 View2 的区域并在其节点上进行渲染。如果 View2 包含节点的引用，它将不再工作，因为它们可能会通过 View1 的渲染而中断。

因此，请注意查看交叉路口及其风险。 Backbone 是一个库，而不是一个框架，它不会保护你免于做愚蠢的事情。

【讨论】：