javascript Backbone js按钮单击事件未触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21378092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone js button click event not firing
提问by OneScrewLoose
I have an ajax function on the initialize of the main router that seems to hinder the event of my signin button in signin.js. When I click the signin button, it doesn't perform its function, instead the browser places the inputs on the URL, (i.e. username and password).
But when I remove the ajax function on the initialize, I can successfully log in.
我在主路由器的初始化上有一个 ajax 函数，它似乎阻碍了我在signin.js. 当我单击登录按钮时，它不执行其功能，而是浏览器将输入放在 URL 上（即用户名和密码）。但是当我把初始化上的ajax功能去掉后，就可以成功登录了。
I've included some of the codes I'm working on. Thanks
我已经包含了一些我正在处理的代码。谢谢
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
登录.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
主页.js
window.HomeView = Backbone.View.extend ({
initialize: function() {
this.render();
},
render: function() {
$(this.el).html( this.template() );
return this;
}
});
some html
一些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>
采纳答案by Rida BENHAMMANE
Ok, I figured out what's your problem :)
好的，我知道你的问题是什么:)
Here is an example that resumes your code jsfiddle.net/26xf4/6. The problem is that you don't call new SigninView(); (instantiate the view) hence its events are never bound.
这是一个恢复您的代码jsfiddle.net/26xf4/6 的示例。问题是你不打电话new SigninView(); （实例化视图）因此它的事件永远不会被绑定。
So, in this example try to uncomment the ligne 43 and your code will work as expected, because when you instantiate a View (new SigninView())its constructor calls the delegateEvents()function (you don't see this in your code, it's in the backbone.js) enabling the events you declare in your view :
因此，在本示例中，尝试取消对 ligne 43 的注释，您的代码将按预期工作，因为当您实例化 View 时，(new SigninView())其构造函数调用该delegateEvents()函数（您在代码中没有看到它，它在backbone.js 中）启用您在视图中声明的事件：
events: {
"click #btn-signin" : "submit"
},
回答by net.uk.sweet
You need to prevent the default behaviour of the submitbutton in your clickhandler. You can do this like so:
您需要防止处理程序中submit按钮的默认行为click。你可以这样做：
var SigninView = Backbone.View.extend ({
el: '#signin-container',
events: {
"click #btn-signin" : "submit"
},
submit: function (event) {
event.preventDefault();
console.log('signin');
$.ajax({ ... });
}
});
Alternatively, you might consider using the html buttonelement which won't attempt to submit the form it's associated with.
或者，您可以考虑使用 htmlbutton元素，该元素不会尝试提交与其关联的表单。
回答by Tan Nguyen
I don't know about your HTML mockup, my best guess is that you are catching the incorrect event here. If you are submitting a form, you should catch submit formevent not click #some-button. Because even if you catch clickevent of button inside a form and return false, the form will be still submitted because those are 2 different events
我不知道你的 HTML 模型，我最好的猜测是你在这里捕捉到了不正确的事件。如果您正在提交表单，则应捕获submit form事件而不是click #some-button。因为即使您捕获click表单内按钮的事件并返回 false，该表单仍将被提交，因为这是 2 个不同的事件
