jquery - Jquery 选择器错误，无法在单击事件中选择元素

Question

我正在尝试制作一个候选列表框，用户将从一个框中选择元素，它将显示在下一个框中，当用户单击入围的元素时，该元素将从列表中消失，一切正常，但是当我点击入围元素时问题就来了。不知道为什么。

这是代码：

HTML：

<div id="secondbox">
    <div class="elements">
        Soni
    </div>
    <div class="elements">
        Soni1
    </div>
    <div class="elements">
        Soni2
    </div>
    <div class="elements">
        Soni3
    </div>
</div>

JQ:

$(".pink").click(function()
    {
        //$(this).remove();
        alert("Hi");
    });
    $(".elements").click(function()
    {
        if($(this).attr("class")=="elements")
        {
            $(this).clone().appendTo("#firstbox").addClass("pink");
            $(this).addClass("red");
        }
    });

CSS：

#secondbox,#firstbox{float:left;height:300px;width:300px;border:1px solid black;}
.elements{width:90%;margin:5px;border:1px dashed orange;}
.red{background-color:#d5d5d5;}
.pink{background-color:#BCED91;}

恳求

Answer 1

由于您是在第二个列表中动态创建这些元素，因此您需要使用它.on()来绑定 click 事件。

$(document).on('click',".pink",function () {
    $(this).remove();
    alert("Hi");
});

jsFiddle 示例

根据以下文档.on()：

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。为确保元素存在并且可以被选择，请在页面 HTML 标记中的元素的文档就绪处理程序内执行事件绑定。如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。