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!");
});

在#container所有.removeIcon元素（包括動態添加的元素）上綁定click事件

Answer 2

是的，問題在於它會在以后添加，因此您必須委托：

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

因此，該事件將分配給容器，但將對.removeIcon項目起作用。

有關更多信息，請檢查jQuery的on function 。

Answer 3

click（）函數不適用於動態加載的數據。 您必須通過DOM或通過使onclick函數捕獲click事件

通過DOM

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

或onclick功能

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