帶有 event.target 的 WeakMap

Question

編輯：結果證明第二個片段（我的真實代碼）實際上沒有任何問題。 在一個頁面上它有效，而在另一個頁面上它沒有。 是的，對於潛在的錯誤。

我正在創建一個 DOM 元素並將該 DOM 元素作為鍵提供給 WeakMap。 然后，使用 JQuery 事件委托/事件偵聽器，我試圖檢索保存的密鑰，但它返回未定義：

const item = document.createElement("div"), __data = new WeakMap();
__data.set(item, {hello: "123"})
document.body.appendChild(item)

// later on in event delegation
$("div").on("click", function(event) {
const target = event.target, data = __data.get(target);
console.log(data)
// prints undefined

任何人都知道為沒有 ID 的 DOM 元素保存數據的問題或替代方法嗎？

編輯：我有點惱火我做的例子有效，但我自己的代碼沒有......（有些位看起來多余。這是根據我的實際代碼建模的，所以並不是所有丟失的部分都在這里，只是務實）但是這是顯然有效的代碼：

 const __data = new WeakMap(); function buildingItem() { const item = document.createElement("div"); item.setAttribute("data-action", "delete"); __data.set(item, {hi: 123}); return item; } function build() { const main = document.getElementById("main") for (let i = 0; i < 3; i++) { const container = document.createElement("div"), attached = document.createElement("div"); const build = buildingItem(), data = __data.get(build); build.classList.add("classified"); data["hello"] = `Item ${i}` __data.set(build, data); build.innerText = `Item ${i}` attached.append(build); container.append(attached); main.append(container); } } build() $(document).on("click", "div.classified[data-action]", function(event) { const target = event.currentTarget, data = __data.get(target); console.log(`CTarget Data: ${data["hello"]}`) })

 <div id="main"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

兩個可能的問題：

1. target是被點擊的最里面的元素。 您可能需要this或event.currentTarget ，它是您掛鈎事件處理程序的元素（可能是target的祖先元素）。

2. 您的 jQuery 代碼連接了所有div 元素上的click事件，而不僅僅是那個，但您在WeakMap中只有一個div 。 如果您單擊不同的 div，您自然會得到undefined ，因為其他div不是 map 中的鍵。

這是一個示例（我在 map 的div中添加了一個span來演示＃1，還添加了第二個div來演示＃2）：

 const item = document.createElement("div"), __data = new WeakMap(); __data.set(item, {hello: "123"}); document.body.appendChild(item); item.insertAdjacentHTML("beforeend", "<span>Click me, I'll work</span>"); document.body.insertAdjacentHTML("beforeend", "<div>Click me, I won't work (I'm not a key in the map)</div>"); $("div").on("click", function(event) { const target = event.currentTarget, data = __data.get(target); console.log("with currentTarget:", data); // Note that using `event.target` wouldn't hav eworked console.log("with target:", __data.get(event.target)); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您已經提到，在您的真實代碼中，您正在使用事件委托。 currentTarget和this在這種情況下都很好：

 // Event delegation $(document.body).on("click", "div.example", function(event) { const data1 = __data.get(event.currentTarget); console.log("using currentTarget:", data1); const data2 = __data.get(this); console.log("using this:", data2); }); // Adding the relevant `div` const item = document.createElement("div"), __data = new WeakMap(); __data.set(item, {hello: "123"}); item.className = "example"; item.textContent = "Some text to make div clickable"; document.body.appendChild(item);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>