javascript - Nested views and events in backbone -

so have 2 views. 1 'parent' view bound collection , number of sub-views bound individual models in collection.

class resulttable extends backbone.view     el:"body"     initialize:()->        @collection.bind "add", @add      add:(model)->        new modelview({model:model})  class modelview extends backbone.view     el: "#resultstablelist"     initialize:()=>        @model.on "selected",@select        @render()      render:()=>        #append template       select:(e)=>        e.preventdefault()        console.log(@model)      events:        'click' : 'select' 

so when click on 1 of list elements, of modelviews' select functions triggered. thought way had built specific model had been clicked show up. what's going on?

template html-

<div id="resultstablecontainer" class="resultscontainer">     <ul id="resultstablelist">     </ul> 

this each model-

<li class="result"> {{ ipaddress }}     </li> 

all modelviews bound same dom element:

class modelview extends backbone.view     el: "#resultstablelist" 

and each instance bind clicks on #resultstablelist:

events:    'click' : 'select' 

note specifying event in events without selector binds view's el:

omitting selector causes event bound view's root element (this.el).

the result have multiple views binding clicks on exact same dom element.

i think want drop el , modelview , let backbone build <li> this:

class modelview extends backbone.view     tagname: 'li'     classname: 'result'     #... 

then, el modelview <li class="result"> , click handler attached <li>. you'll have adjust rendering put els <ul id="resultstablelist"> in caller well.