前提:
复仇者联盟
<ul id="team1">
<li>钢铁侠</li>
<li>蜘蛛侠</li>
<li>美国队长</li>
<li>奇异博士</li>
<li>黑寡妇</li>
</ul>
正义联盟
<ul id="team2">
<li>蝙蝠侠</li>
<li>超人</li>
<li>钢骨</li>
<li>闪电侠</li>
<li>神奇女侠</li>
</ul>
错误写法:(bind方法只能让最初始的dom绑定事件,而动态生成的dom则不会有事件)
$(function() {
$("ul li").bind("mouseover", function() {
$(this).css("color", "red");
}).bind("mouseout", function() {
$(this).css("color", "black");
});
$("#team1 li").bind("click", function() {
var li = "<li>" + $(this).text() + "</li>";
$(li).appendTo("#team2");
$(this).remove();
});
$("#team2 li").on("click",function() {
var li = "<li>" + $(this).text() + "</li>";
$(li).appendTo("#team1");
$(this).remove();
});
});
正确写法(效果是点击任何一个队员都会切换他的队伍):
$(function() {
$("ul").on("mouseover","li", function() {
$(this).css("color", "red");
}).on("mouseout","li", function() {
$(this).css("color", "black");
});
$("#team1").on("click","li", function() {
var li = "<li>" + $(this).text() + "</li>";
$(li).appendTo("#team2");
$(this).remove();
});
$("#team2").on("click", "li",function() {
var li = "<li>" + $(this).text() + "</li>";
$(li).appendTo("#team1");
$(this).remove();
});
});