[英]Backbone js button click event not firing
我在主路由器的初始化上有一个ajax函数,它似乎阻碍了我在signin.js
登录按钮的signin.js
。 当我单击signin按钮时,它不会执行其功能,而是浏览器将输入放在URL上(即用户名和密码)。 但是当我在初始化时删除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>
您需要阻止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
元素,该元素不会尝试提交与其关联的表单。
好的,我弄清楚你的问题是什么:)
这是一个恢复代码jsfiddle.net/26xf4/6的示例 。 问题是你没有调用new SigninView()
; (实例化视图)因此它的事件永远不会受到约束。
所以,在这个例子中尝试取消注释ligne 43,你的代码将按预期工作,因为当你实例化一个View (new SigninView())
它的构造函数会调用delegateEvents()
函数(你在代码中没有看到这个,它在backbone.js中启用你在视图中声明的事件:
events: {
"click #btn-signin" : "submit"
},
我不知道你的HTML模型,我最好的猜测是你在这里捕捉到错误的事件。 如果您要提交表单,则应该抓住submit form
事件而不是click #some-button
。 因为即使您在表单中捕获按钮的click
事件并返回false,表单仍将被提交,因为这些是2个不同的事件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.