Магистраль Click Свойства события

Question

Я использовал backbone.js 'click' событие здесь. onClick, я хочу выбрать элемент HTML с щелчком, удалить его и добавить в добавленный список.

Я не могу получить доступ ко всему элементу HTML dom, где я нажал. После получения HTML-элемента.

Если я нажму «Китай», приведенный ниже код будет предупреждать «<li>China</li>».

Итак, как мне получить доступ ко всем свойствам dom? Код

Java Script:

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 "<li>US</li>" after clicking US 
       alert(ac); 
       }, 
     prepareActions:function(){   
        var str=""; 
        for(var i=0;i<actions.length;i++) str+="<li>"+actions[i]+"</li>";       
        $("#add ul").append(str); 
     }  
    });  
var actionBox = new ActionBox(); 

и HTML код, как показано ниже:

<div id="container"> 
    <table> 
    <tr> 
     <td> 
      <div id="add">  
       <ul> 
       <li>US</li> 
       <li>China</li> 
       <li>UK</li> 
       </ul> 
      </div> 
     </td> 
     <td> 
      <div id="controls"> 

      </div> 
     </td> 
     <td> 
      <div id="added">   
       <ul></ul> 
      </div> 
     </td> 
    </tr> 
    </table>   
</div> 

Есть два ул контейнеры, добавить и добавил, если я нажимаю элемент из источника, он должен быть перенесен в целевой контейнер.

Answer 1

Вы просто хотите использовать appendTo - это удалить его и положить его в #added UL

$(ev.target).appendTo('#added'); 

Answer 2

Я попытался запустить его сам с Backbone 0.9.1, и все сработало нормально. Убедитесь, что вы в том числе

var ActionBox = Backbone.View.extend({ 
    el:$("#container"), 
    ...  
}); 

после ваш HTML визуализируется. В противном случае вы указываете $("#container"), прежде чем он действительно существует в DOM. Если вы это сделаете, jQuery ничего не вернет, поэтому установит el в пустой массив, поэтому ваши события не будут связаны ни с чем ... Поэтому их никогда не будут вызывать.

Описание: Работает jsFiddle: http://jsfiddle.net/8jyeb/1/. Обратите внимание, что вы должны обернуть весь JavaScript в обработчике jQuery DOM Ready. Это гарантирует, что код не будет запущен до загрузки HTML-кода.