Javascript 主干js按钮单击事件未触发

在初始化主路由器时，我有一个ajax函数，它似乎会妨碍

signin.js

中的登录按钮事件。当我单击“登录”按钮时，它不会执行其功能，而是浏览器将输入放在URL上（即用户名和密码）。 但是，当我在initialize上删除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;         
},

签名

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>

还记得我吗？

您需要防止

单击处理程序中的
提交
按钮的默认行为。您可以这样做：

var SigninView = Backbone.View.extend ({
    el: '#signin-container',
    events: {
        "click #btn-signin" : "submit"
    },
    submit: function (event) {
        event.preventDefault();
        console.log('signin');
        $.ajax({ ... });
    }
});

可选地，您可以考虑使用HTML<代码>按钮>代码>元素，该元素不会尝试提交与它相关联的窗体。 好吧，我知道你有什么问题：）
下面是一个恢复代码的示例。问题是您没有调用
newsigninview（）
；（实例化视图）因此其事件从不绑定

因此，在本例中，尝试取消对ligne 43的注释，您的代码将按预期工作，因为当您实例化一个视图
（new SignenView（））
时，它的构造函数调用
delegateEvents（）
函数（您在代码中看不到这一点，它在backbone.js中）来启用您在视图中声明的事件：

events: {
    "click #btn-signin" : "submit"
},

我不知道你的HTML模型，我最好的猜测是你在这里捕捉到了错误的事件。如果您正在提交表单，您应该捕获
提交表单
事件，而不是
单击#某些按钮
。因为即使您捕获表单中按钮的事件并返回false，表单仍将提交，因为这是两个不同的事件，实际上我有
返回false就在ajax函数之后。但它仍然不能执行
console.log（'sign'）结果将是相同的，问题在主干内而不是htmlI中。submit按钮正在尝试提交表单，这就是您在URL中看到表单值的原因。试试我最新的答案。哦，对了，这是一件事。但是我的工作ajax函数（如果初始化被注释掉）在没有在URL上发布输入的情况下正常工作。您的初始化函数引用LoginView，但您发布的视图称为SignenView。这可能是一个问题吗？您可以包括您的HomeView代码吗？您在哪里实例化了SignenView？我已经添加了
homeView
没有什么特别之处<代码>变量符号视图=新符号视图（）我把它放在signin.js的底部，如果这是你要问的，如果你删除ajax函数的两行：$（'.pagewrap'）.html（…；它仍然有效？好吧，它将失去它的用途，我将无法测试登录按钮，因为它位于
homeView
抱歉，我以为你在使用链接。我的答案阻止链接默认行为。我尝试将其改为
提交#按钮名
它仍然是相同的。你也可以将HTML放在这里吗？这可能会有所帮助顺便说一句，你需要听一下
表单本身，就像在
提交#表单id
不
提交#按钮名称
中一样，然后你需要更改
“点击#btn登录”：“提交”
到
“提交#签名包含”：“提交”
，即使我没有
type=“提交”
在我的
输入
标记中？您能解释一下吗？即使我的
符号视图中没有
呈现
函数
？尝试了
新符号视图（）.render（）
它现在可以工作了，谢谢！你能解释一下为什么会发生这种情况吗？如果你愿意，你不需要调用
render
，我更新了我的答案。因此有另一个视图指向同一个el
#signin容器
并且它在你的
SigninView
视图之后实例化，因此第一个视图的事件绑定丢失。