每當用戶單擊按鈕時，我都會顯示從 .html 函式生成的 div 元素串列。代碼如下所示
大批
const obj = [{"id":"1","section":"delivery","label":"Self-Pick up"},{"id":"2","section":"delivery","label":"Delivery"}]
javascript
createFilterBubblesTemplate = (obj) => {
let bubbles = ''
obj.forEach(e => {
bubbles = `<div >
<span>${e.label}</span>
<span id="bubbles-close" data-filter-id="${e.id}" data-filter-section="${e.section}"></span>
</div>`
})
$("#filtered-items").html(bubbles);
}
createFilterBubblesTemplate函式生成后的html元素
<div class="filter-items" id="filtered-items">
<div class="filter-btn">
<span>Self-Pick up</span>
<span class="icon-xmark" id="bubbles-close" data-filter-id="1" data-filter-section="delivery"></span>
</div><div class="filter-btn">
<span>Delivery</span>
<span class="icon-xmark" id="bubbles-close" data-filter-id="2" data-filter-section="delivery"></span>
</div>
</div>
但是，當我嘗試使用 在跨度上附加 click eventlistener 時，它似乎不起作用。需要幫助來解決這個問題
document.querySelectorAll('.icon-xmark').forEach(item => {
item.addEventListener('click', (event) => {
console.log(event)
})
})
uj5u.com熱心網友回復：
也許您在將元素添加到 DOM 之前附加了事件。嘗試委托事件
document.addEventListener('click', (event) => {
const target = event.target;
if (target.classList.contains('icon-xmark')) {
console.log(event);
}
});
但最好使用日期屬性
<span class="icon-xmark" data-close id="bubbles-close" data-filter-id="2" data-filter-section="delivery"></span>
...
document.addEventListener('click', (event) => {
const target = event.target;
if ('close' in target.dataset) {
console.log(event);
}
});
uj5u.com熱心網友回復：
使用 Arm144 的答案解決了該問題。將 onclick 屬性附加到跨度中
createFilterBubblesTemplate = async (obj) => {
let bubbles = ''
obj.forEach(e => {
bubbles = `<div >
<span>${e.label}</span>
<span onclick="closeFiltersBubbles(${e.id},'${e.section}')" data-filter-id="${e.id}" data-filter-section="${e.section}"></span>
</div>`
})
$("#filtered-items").html(bubbles);
}
uj5u.com熱心網友回復：
您分配單擊處理程式的跨度為空，因此它們以 0 寬度呈現，您無法單擊它們。
以下通過添加內容（不間斷空格）來糾正此問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="expires" content="0">
<meta http-equiv="cache-control" content="private">
<meta http-equiv="pragma" content="no-cache">
<title>SO - Bitmap (svg)</title>
<!--
-->
<style type="text/css">
body {
background-color: #eee;
}
.icon-xmark {
background-color: lime;
cursor: pointer;
}
</style>
<script>
const obj = [{"id":"1","section":"delivery","label":"Self-Pick up"},{"id":"2","section":"delivery","label":"Delivery"}];
let createFilterBubblesTemplate = (obj) => {
let bubbles = '';
obj.forEach(e => {
bubbles = `<div >
<span>${e.label}</span>
<span id="bubbles-close" data-filter-id="${e.id}" data-filter-section="${e.section}"> </span>
</div>`;
});
document.querySelector("#filtered-items").innerHTML = bubbles;
}; // createFilterBubblesTemplate
document.addEventListener('DOMContentLoaded', () => {
setTimeout ( () => {
createFilterBubblesTemplate(obj);
setTimeout ( () => {
document.querySelectorAll('.icon-xmark').forEach(item => {
item.addEventListener('click', (event) => {
console.log('Here we go...');
});
});
}
, 1000
);
}
, 1000
);
});
</script>
</head>
<body>
<div class="filter-items" id="filtered-items"></div>
</body>
</html>uj5u.com熱心網友回復：
使用 jQuery 方法委托單擊事件.on()。將 click 事件系結到一個靜態元素（自頁面加載以來一直存在的元素，例如#filtered-items），然后將 click 事件委托給單擊.icon-xmark的用戶（$(this)）。這種間接的事件處理方式稱為事件委托。這是必要的，因為您無法將事件處理程式系結到動態添加的元素。
細節在例子中注釋
const obj = [{
"id": "1",
"section": "delivery",
"label": "Self-Pick up"
}, {
"id": "2",
"section": "delivery",
"label": "Delivery"
}]
/*
A proper arrow function should begin with a const or let
`.html()` method is like `.innerHTML` in that it it's destructive
Use `.append()`
*/
const createFilterBubblesTemplate = (obj) => {
obj.forEach(e => {
let html =`<div >
<span>${e.label}</span>
<span data-filter-id="${e.id}" data-filter-section="${e.section}"></span>
</div>`;
$("#filtered-items").append(html);
});
}
/*
Delegate click events to each ".icon-xmark" by binding the click event to
the parent tag "#filtered-items"
Note the second parameter ".icon-xmark" -- that designates "this" as ".icon-xmark"
console.log(event) does nothing
*/
$("#filtered-items").on('click', ".icon-xmark", function(e) {
const x = $(this).data('filter-id');
console.log(x);
});
createFilterBubblesTemplate(obj);.icon-xmark {
display: inline-block;
padding: 5px;
outline: 1px red dashed
}<div class="filter-items" id="filtered-items"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497389.html