WeakMap与event.target

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，这是将事件处理程序(可能是this的祖先元素)连接到的元素。

1. 您的jQuery代码在所有 div元素上连接click事件，不仅是那个元素，而且在WeakMap中只有一个div。如果单击不同的div，自然会得到undefined，因为另一个div不是映射中的键。

下面是一个示例(我在地图中的span中添加了一个div来演示#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>

​