javascript - 带有 event.target 的 WeakMap
问题描述
编辑:结果证明第二个片段(我的真实代码)实际上没有任何问题。在一个页面上它有效,而在另一个页面上它没有。是的,对于潜在的错误。
我正在创建一个 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>
解决方案
两个可能的问题:
target
是被点击的最里面的元素。您可能想要this
或event.currentTarget
取而代之的是,它是您挂钩事件处理程序的元素(可能是 的祖先元素target
)。您的 jQuery 代码将
click
事件连接到所有div 元素上,而不仅仅是那个,而且您div
在WeakMap
. 如果您单击不同的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>
推荐阅读
- jquery - ASP.NET MVC5 图像上传器在使用 Ajax 和 jQuery 发布表单时创建问题
- python - 在 python 中打印随机一维数组
- machine-learning - 在高斯核的情况下来自 SVM 的参数 b
- javascript - 在 React 中格式化来自 API 的响应并将其添加到状态时出现问题
- javascript - 如何修复 null 不是对象 React Native Splash Screen
- python - Django Permissions - 相同的代号,不同的名称问题
- android - gradle 同步失败,因为:ReactNative:Running '[node, -e, console.log(require('react-native/cli').bin);]' 命令失败
- c++ - 不知道是否省略了某些东西会引入未定义的行为吗?
- javascript - 如何在反应中将道具从父母传递给孩子?
- varnish - 清漆(?)中断文件下载