Propiedades del evento de clic en la columna vertebral

Question

He usado backbone.js 'click' aún allí. Evento de OnClick, quiero seleccionar el elemento HTML hecho clic, eliminarlo y agregar a la lista agregada.

No puedo acceder a todo el elemento HTML DOM donde he hecho clic. Después de obtener el elemento HTML.

Si hago clic en 'China', el siguiente código alertaría '<li>China</li>'.

Entonces, ¿cómo accedo a todas las propiedades DOM?

Código de script de Java:

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();

y código HTML como se muestra a continuación:

    <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>

Hay dos contenedores UL, agregado y agregado, si hago clic en el elemento desde la fuente, debe cambiarse al contenedor de destino.

Answer 1

Solo desea usar appendto: esto lo eliminará y lo pondrá en su #added ul

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

Answer 2

Intenté ejecutarlo yo mismo con la columna vertebral 0.9.1, y todo funcionó bien. Asegúrate de incluir

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

después Tu HTML se representa. De lo contrario, estás especificando $("#container") Antes de que realmente exista en el DOM. Si hace eso, jQuery no devolverá nada el Para una matriz vacía, por lo que sus eventos estarán obligados a nada ... por lo tanto, nunca se les llamaría.

Aquí hay un jsfiddle con él funcionando: http://jsfiddle.net/8jyeb/1/ . Tenga en cuenta que debe envolver todo el JavaScript en un controlador de jQuery Dom Ready. Esto asegurará que el código no se ejecute hasta que se haya cargado el HTML.