JQuery类选择器不起作用

Question

我正在尝试根据它的类选择一个元素（使用$（“。class”））并且我遇到了问题，我不确定它为什么会发生。

首先，元素是图像。当函数执行时会创建它：

$("#container").append("<img class='removeIcon' src='images/remove.png' remove='"+$(this).val()+"' />");

这样可行。触发功能时添加图像，甚至多次。每个人的价值都是它的意义，这一切都很好。元素很好。

什么不起作用......

$(".removeIcon").click(function() {
    alert();
    console.log("Clicked!");
});

我不确定它是否不起作用，因为图像是稍后添加的，或者我可能做错了什么？但是每当我点击该类的任何图像时，就没有警报对话框，也没有控制台日志。

我输入了控制台，$（“。removeIcon”）; - 它显示了该类的所有图像，所以我不明白什么是错的。甚至在类选择器上也没有点击？

提前致谢！

Answer 1

您的代码仅适用于现有的.removeIcon元素。

如果您确实添加了动态元素，请尝试使用.on

$("#container").on('click', '.removeIcon', function() {
    alert();
    console.log("Clicked!");
});

在click内的所有.removeIcon元素上绑定#container个事件  （包括动态添加的元素）

Answer 2

是的，问题是它稍后会被添加，所以你必须委托：

$("#container").on('click', '.removeIcon', function() {
    alert();
    console.log("Clicked!");
});

因此，该活动将被归为容器，但会对 .removeIcon 项目采取行动。

有关更多信息，请查看jQuery的on function。

Answer 3

click（）功能不适用于动态加载的数据。 您必须通过 DOM 或通过 onclick 功能

捕获点击事件

由DOM

$("#container").on('click', '.removeIcon', function() { console.log("click"); });

OR onclick功能

$("#container").append("<img class='removeIcon' onclick="somefunctionInJS()" src='images/remove.png' remove='"+$(this).val()+"' />");