没有触发中枢事件，我也不明白为什么

Question

Based off of I dont know how many examples. This should work, yet it does not. I am so new to backbone.js that this just hurts my head cause I can write jquery based code with my eyes close, I can write native javascript no problem. But this, what? Why? the click will not work, the "events" as far as I can tell just don't register. Can I not do event's on divs? or what am I missing?

Now I know this will be flagged a duplicate, I know people will just link to some other example. The problem is I've likely already seen it, compared it, and still for the life of me can't figure out what is wrong. It works up until the events, when I click on the div I'd assume the event be fired and its not. This is my issue I don't know why, and not knowing why is whats causing the headache

<div id="test"></div>
<div>Test</div>

        <script>

            var BodyView = Backbone.View.extend({
              el: '#test',
              events:{
                  "click #test"         : "changeColorOne"
              },
              changeColorOne: function()
              {
                  console.log('hate');
                  $(this.el).css({color:'#00F'});
              },
              changeColorTwo: function()
              {
                  $(this.el).css({color:'#000'});
              },
              render: function(str)
              {
                 $(this.el).html('Hello').css({color:'#F00'});
                 $(this.el).append(' World');
              },
              initialize: function()
              {
                  this.render();
              }


            });

            var body = new BodyView();

            console.log(body.el);
        </script>

Answer 1

click #test is trying to attach to $('#test').find('#test') which will be empty.

Either pick an element inside your container or remove #test to attach to the container.

el: '#test',
events:{
  "click" : "changeColorOne"
}

Fiddle