backbone.js - 骨干.js点击不触发

Question

我们已经研究并尝试了所有我们能找到的东西，但看不出为什么按钮点击甚至没有触发。如果我们更改视图渲染 html 颜色，它会显示更改，因此视图渲染工作正常，但单击登录按钮时 -> 什么也没有。js 控制台中没有显示错误。试过了

button#login_button和#login_button-login_button什么都没有。我们缺少什么？感谢任何帮助

  SessionView = Backbone.View.extend({
    el: ('#session'),
    initialize:function () {
        this.render();
    },
    render:function () {
      if (!session) {
        $(this.el).html(
          "<button id=\"login_button\" class=\"login_button black\">"+
          "Login"+
          "</button>");
        return this;
      } else {
        $(this.el).html(
          "<button id=\"logout_button\" class=\"login_button black\">"+
            "Logout</button>");
        return this; 
      }
    },
    events: {
        "click login_button" : "login",
        "click logout_button": "logout"
    },
    login: function(){
      alert("login");
      console.log("login dialog");
      //var loginView = new LoginView();
      //loginView.render().showModal();
    },
    logout: function(){
      alert("You Have Logged Out");
    }

  });

Answer 1

您应该在选择器中保留“#”：

events: {
        "click #login_button" : "login",
        "click #logout_button": "logout"
    }

更新

您是否等待 DOM 准备好在new此 Backbone 视图类上使用？您的按钮被html调用更改的事实意味着您这样做了。

一旦您检查了这一点，您就必须使用this.$el而不是$(this.el).

如果它仍然不起作用，请搜索事件阻止并确保 id 是唯一的。

这个非常简单的JSFiddle适用于您告诉我们的相同条件。