Backbone.js: Cannot bind events

Question

I've almost tried everything and even exactly copied the example: [in here][1]

However I can't get to see it work it. I've tried multiple alternations for the event binding but none of them seem to work. What can be the possible reason?

Div container;

Load

My event binding trials;

el: '#container',
        events: {
            "click button": "render"
        }

Also;

el: '#container',
    events: {
        "click button#add": "render"
    }

And finally this;

el: '#container',
events: {
            "click input[type=button]": "doSearch"  
        }

Is there any possibility of that I'm doing this wrong. Besides if I get it to work, would it be possible to assign click event for each function in the div, giving their id's instead of a more general "click button": "render"?

NOTE: I couldn't get the html code wrapped in code tag.

I prefer to use jquery on function for the elements which are dynamically are been added to the DOM after the view is rendered. For example initialize: function() { this.$el.on('click', 'button', handler); } — Vitalii Petrychuk
– Vitalii Petrychuk, Commented May 18, 2012 at 18:51

JamesOR · Accepted Answer · 2012-05-18 19:40:34Z

2

Is your input button a child element of container? Backbone won't find elements outside the scope of the view's element.

You can do "click #add" provided #add is a child element of #container.

answered May 18, 2012 at 19:40

JamesOR

1,1681 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ali Over a year ago

I've later set 'el:body' for a more general approach but still didn't work

JamesOR Over a year ago

Can you post a jsfiddle example with a little more code to see what you're doing?

Michi Kono · Accepted Answer · 2012-05-18 19:40:06Z

1

First of all, I'll assume your code is from the Backbone view, correct?

Does the #container div exist in the DOM? I notice your examples are calling render on click, but usually render is where people put code to actually render the HTML templates.

The delegateEvents documentation on BackboneJS uses the following render call as their example:

 render: function() {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
  },

Note that until this fires, the example would technically not have anything for you to click on.

A quick way to test this would be to run this in the console after your application fires up:

$("#container")

If this returns an empty "[ ]", then you know you have problems. The second thing to consider is if it is actually clickable (because maybe it exists, but it's not clickable due to its position or size).

Therefor, the final test would be to run this in the console and try clicking on the div:

$("#container").click(function() { alert('clicked');});

answered May 18, 2012 at 19:40

Michi Kono

3162 silver badges6 bronze badges

2 Comments

Ali Over a year ago

Would it be possible to solve this problem without integrating jquery. I mean simply defining events in 'events:{}' would not do good?

Michi Kono Over a year ago

My main point was for the OP to check if the implementation is correct (that there is a DOM element with the ID #container rendering). His examples indicated that no element of that ID may be in the DOM. The code I subsequently posted was just a suggestion on how to troubleshoot. The render code I posted was taken directly from the BackboneJS documentation. The OP could use any other framework or code sample to create the HTML. BackboneJS does not handle creating HTML unless you manually tell it to do so (as per example). Hope this clarifies things.

Collectives™ on Stack Overflow

Backbone.js: Cannot bind events

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related