我的BUG日志（2019031301）：JQuery给动态添加的元素绑定事件的方法

前提：

复仇者联盟
        <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();
            });
        });