1

我在click这里使用了backbone.js ' ' 事件。onClick 事件，我想选择单击的 HTML 元素，将其删除并添加到添加的列表中。

我无法访问我单击的所有 HTML dom 元素。获取 HTML 元素后。

如果我点击“中国”，下面的代码会提醒“ <li>China</li>”。

那么，如何访问所有 dom 属性？

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

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

有两个 ul 容器，添加和添加，如果我从源中单击元素，它应该转移到目标容器中。

4

2 回答 2

6

您只想使用 appendTo - 这将删除它并将其放入您的#add UL

$(ev.target).appendTo('#added');
于 2012-02-17T15:06:16.457 回答
0

我尝试使用 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 之前代码不会运行。

于 2012-02-17T15:02:55.370 回答