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 example

根据.on()上的文档：

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

Jquery Selector Error，无法在click事件上选择元素

1 个答案: