Question

I have a pretty basic Backbone question. I want to apply a class (using jQuery) when an element is clicked. Unfortunately I don’t know how to do this with Backbone views – I can capture the click event, but I don’t know how to get the element in a way that jQuery can understand.

My HTML looks like this:

<div id="options">
<ul>
<li>red</li>
<li class="selected">blue</li>
<li>green</li>
</ul>
</div>

UPDATE – sorry, I should have given a less edited-down example, the real HTML is actually like this:

<li><img src="red.jpg"><h3>red</h3></li> 
<li class="selected"><img src="blue.jpg"><h3>blue</h3></li> 
<li><img src="green.jpg"><h3>green</h3></li> 

And my Backbone code looks like this:

var SearchFormView = Backbone.View.extend({
el: $('#options'),
events: {
  "click li": "updateResults"
},
updateResults: function(e) {
  console.log('updateResults');
  $(this).toggleClass("selected");
}

});

It isn’t working as it stands – updateResults is being logged to the console, but the class isn’t being applied. I think this because I’m not using this correctly. Grateful for any advice.

Answer 1

Sup when using backbone events, this is set to the view. try using e.target instead of this.