title: Backbone Click Event Properties
body: <p>I've used backbone.js '<code>click</code>' event here. onClick event, I want to select the clicked HTML element,remove it and add into added list. </p>
  
  <p>I am not able to access all HTML dom element where I have clicked. After getting HTML element.</p>
  
  <p>If I click 'China', The below code would alert '<code>&lt;li&gt;China&lt;/li&gt;</code>'.</p>
  
  <p>So, How do I access all dom properties ?</p>
  
  <p>Java Script code:</p>
  
  <pre><code>var ActionBox = Backbone.View.extend({
          el:$("#container"),
          events: {
                      "click #add li": "addItem",
                      "click #alert": "alertHere"
          },
          initialize: function(){     
                  _.bindAll(this,"addItem","render");             
                  this.render();  
          },
          render:function(){  
                  this.prepareActions();          
          },
          addItem:function(ev){
                  var ac=$(ev.target).html(); // it doesn't give me "&lt;li&gt;US&lt;/li&gt;" after clicking US
                  alert(ac);
                  },
          prepareActions:function(){          
                      var str="";
                      for(var i=0;i&lt;actions.length;i++)   str+="&lt;li&gt;"+actions[i]+"&lt;/li&gt;";                         
                      $("#add ul").append(str);
          }       
      });    
  var actionBox = new ActionBox();
  </code></pre>
  
  <p>and HTML code as below:</p>
  
  <pre><code>    &lt;div id="container"&gt;
      &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div id="add"&gt;      
                  &lt;ul&gt;
                   &lt;li&gt;US&lt;/li&gt;
                   &lt;li&gt;China&lt;/li&gt;
                   &lt;li&gt;UK&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div id="controls"&gt;
  
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div id="added"&gt;        
                  &lt;ul&gt;&lt;/ul&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;        
  &lt;/div&gt;
  </code></pre>
  
  <p>There are two ul containers, add and added, If I click the element from source, it should be shifted into target container.</p>