Backbone -Klick -Ereigniseigenschaften

Question

Ich habe Backbone.js verwendet. 'click' sogar dort. Onclick -Event, ich möchte das klickte HTML -Element auswählen, es entfernen und in die hinzugefügte Liste hinzufügen.

Ich kann nicht auf alle HTML -DOM -Elemente zugreifen, auf die ich geklickt habe. Nach dem HTML -Element.

Wenn ich auf "China" klicke, würde der folgende Code alarmieren "<li>China</li>'.

Wie kann ich auf alle DOM -Eigenschaften zugreifen?

Java -Skriptcode:

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

und HTML -Code wie unten:

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

Es gibt zwei UL -Container, hinzufügen und hinzugefügt, wenn ich auf das Element aus der Quelle klicke, sollte es in den Zielcontainer verschoben werden.

Answer 1

Sie möchten nur AppendTO verwenden - dies wird es entfernen und in Ihr #Added UL einfügen

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

Answer 2

Ich habe versucht, es selbst mit Backbone 0.9.1 zu laufen, und alles hat gut funktioniert. Stellen Sie sicher, dass Sie einbeziehen

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

nach Ihr HTML wird gerendert. Ansonsten geben Sie an $("#container") Bevor es tatsächlich im Dom existiert. Wenn Sie das tun, wird JQuery nichts zurückgeben el Zu einem leeren Array, also werden Ihre Ereignisse an nichts gebunden ... deshalb würden sie niemals gerufen.

Hier ist ein JSFIDDLE mit der Arbeit: http://jsfiddle.net/8jyeb/1/ . Beachten Sie, dass Sie das gesamte JavaScript in einem Jquery Dom Ready -Handler einwickeln müssen. Dadurch wird sichergestellt, dass der Code erst ausgeführt wird, wenn das HTML geladen wurde.