javascript 主干点击事件属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9330201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Backbone Click Event Properties
提问by Umesh Patil
I've used backbone.js 'click' event here. onClick event, I want to select the clicked HTML element,remove it and add into added list.
我在click这里使用了backbone.js ' ' 事件。onClick 事件，我想选择单击的 HTML 元素，将其删除并添加到添加列表中。
I am not able to access all HTML dom element where I have clicked. After getting HTML element.
我无法访问我单击的所有 HTML dom 元素。获取 HTML 元素后。
If I click 'China', The below code would alert '<li>China</li>'.
如果我点击“ CN ”，下面的代码会提醒“ <li>China</li>”。
So, How do I access all dom properties ?
那么，如何访问所有 dom 属性？
Java Script code:
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();
and HTML code as below:
和 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>
There are two ul containers, add and added, If I click the element from source, it should be shifted into target container.
有两个 ul 容器，add 和 added，如果我从源单击元素，它应该转移到目标容器中。
回答by Will Stern
You just want to use appendTo - this will remove it and put it into your #added UL
您只想使用 appendTo - 这将删除它并将其放入您的 # added UL
$(ev.target).appendTo('#added');
回答by Kevin Peel
I tried running it myself with Backbone 0.9.1, and everything worked fine. Make sure you're including
我尝试使用 Backbone 0.9.1 自己运行它，一切正常。确保你包括
var ActionBox = Backbone.View.extend({
el:$("#container"),
...
});
afteryour HTML is rendered. Otherwise, you're specifying $("#container")before it actually exists in the DOM. If you do that, jQuery will return nothing therefore setting elto an empty array, so your events are will be bound to nothing... Therefore they'd never be called.
在您的 HTML 呈现之后。否则，您是$("#container")在它实际存在于 DOM 之前指定的。如果这样做，jQuery 将不会返回任何内容，因此设置el为空数组，因此您的事件将不会绑定到任何内容......因此它们永远不会被调用。
Here is a jsFiddle with it working: http://jsfiddle.net/8jyeb/1/. Notice that you have to wrap all of the JavaScript in a jQuery DOM Ready handler. This will ensure the code isn't run until the HTML has loaded.
这是一个可以工作的 jsFiddle：http: //jsfiddle.net/8jyeb/1/。请注意，您必须将所有 JavaScript 包装在一个 jQuery DOM Ready 处理程序中。这将确保代码在 HTML 加载之前不会运行。
