jQuery＆Backbone点击事件没有触发

问题描述：

我知道这个问题出现了一百万次，但我已经通过了答案，没有一个帮助。。jQuery＆Backbone点击事件没有触发

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

在小提琴，当我绑定一个正常的$（ '＃登录-BTN'）点击（）;事件工作正常，虽然它不在我自己的设置（与铬）。骨干点击事件不起作用。

这是标题的样子对我自己的代码

<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开发者控制台中是否有任何错误？ – 2013-03-01 13:06:45

Nope none，直接通过jQuery从控制台绑定点击事件似乎可行。我试过使用.on（）等。他们都没有工作。骨干刚刚失败.. – SamV 2013-03-01 13:08:31

答

你设置你的视图元素是这样的：

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

每个骨干观点得到一种超然的DOM节点其el在创建时为。当你像这样设置this.el时，Backbone不知道你已经改变了元素，并且仍然在原始的分离节点上监听事件。

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

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

如果你需要一个视图的el视图的使用寿命期间动态设置，你应该使用view.setElement，使骨干到events绑定新元素：

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

这适用于JSFiddle，但不适用于我的本地代码。这让人讨厌。 jQuery点击事件根本就不在本地工作，我认为这是问题所在？ – SamV 2013-03-01 13:22:06

@Sam，编辑我的答案。 – jevakallio 2013-03-01 13:34:45

嘎，我单独尝试了这两种东西，但从来没有在一起，谢谢！ – SamV 2013-03-01 13:35:11

答

我必须设置EL没有的jQuery为它在工作JSFiddle ... el：'body'

答

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

答

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

将el设置为尽可能靠近要用View Controller维护的区域，以避免与其他视图控制器发生交叉或不需要的父母操作。

想象一下View1包含View2的区域并在其节点上渲染。如果View2中包含节点引用，View2将不再起作用，因为它们可能会从View1中的渲染中断开。

因此，请注意查看交叉点及其风险。骨干是一个图书馆，而不是一个框架，并不会保护你免于做愚蠢的事情。

jQuery＆Backbone点击事件没有触发

相关推荐