小贝子编程

如何通过事件委派来倾听不同的听众



我有一些动态创建的数据，如下面的片段

const resultsDiv = document.getElementById("results");
const getList = document.getElementById("example");
document.querySelector(".container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.type && tgt.type === "radio") {
const hide = tgt.classList.contains("verify-no");
[...tgt.closest(".card-body").querySelectorAll("p.card-text")].forEach(par => par.classList.toggle("d-none", hide))
}
})
getList.addEventListener("click", e => {
let results = ['a', 'b', 'c'];
results.forEach((el, idx) => {
//carousel
const carouselItem = document.createElement("div");
if (idx === 1) {
carouselItem.classList.add("carousel-item", "active");
}
carouselItem.classList.add("carousel-item");
//row below carousel
const row = document.createElement("div");
row.classList.add("row");
//column for rows
const column = document.createElement("div");
column.classList.add("col-md-12", "mb-3");
// card for each carousel inside column
const card = document.createElement("div");
card.classList.add("card");
// card body for card
const cardBody = document.createElement("div");
cardBody.classList.add("card-body", "text-center");
// card text (upload info)
const cardTextUploadedOn = document.createElement("p");
cardTextUploadedOn.classList.add("card-text");
cardTextUploadedOn.innerText = "adsadad";
const cardTextUploadedBy = document.createElement("p");
cardTextUploadedBy.classList.add("card-text");
cardTextUploadedBy.innerText = "adsadad";
// show predictions
const formGroup = document.createElement("div");
formGroup.classList.add("form-group", "row");
const predLabel = document.createElement("div");
predLabel.classList.add("col-lg-12");
predLabel.innerText = "Select";
const dummy = document.createElement("div");
dummy.classList.add("col-sm-10");
formGroup.appendChild(predLabel);
formGroup.appendChild(dummy);
// yes / no options
const verifyRow = document.createElement("div");
verifyRow.classList.add("row");
const verifyLegend = document.createElement("legend");
verifyLegend.classList.add("col-form-label", "col-lg-12", "pt-0");
verifyLegend.innerText = "Is this correct ?";
const verifyDummy = document.createElement("div");
verifyDummy.classList.add("col-sm-10");
const verifyYesFormCheck = document.createElement("div");
verifyYesFormCheck.classList.add("form-check");
const verifyNoFormCheck = document.createElement("div");
verifyNoFormCheck.classList.add("form-check");
const yesInput = document.createElement("input");
yesInput.classList.add("form-check-input", "verify-yes");
yesInput.type = "radio";
yesInput.checked = true; // this will check it
yesInput.name = "choosePred" + idx;
yesInput.value = "Yes";
const verifyYesLabel = document.createElement("label");
verifyYesLabel.classList.add("form-check-label", "verify-yes");
verifyYesLabel.innerText = "Yes";
const verifyNoLabel = document.createElement("label");
verifyNoLabel.classList.add("form-check-label", "verify-no");
verifyNoLabel.innerText = "No";
const noInput = document.createElement("input");
noInput.classList.add("form-check-input", "verify-no");
noInput.type = "radio";
noInput.name = "choosePred" + idx;
noInput.value = "No";
// yes no options end
// select //
const selectForm = document.createElement("div");
selectForm.classList.add("form-group", "selectGroup");
const selectCLabel = document.createElement("label");
selectCLabel.innerText = "Select C";
const selectPLabel = document.createElement("label");
selectPLabel.innerText = "Select P";
//select for crop options
const selectC = document.createElement("select");
selectC.classList.add("form-control", "c-select");
//select for pest options
const selectP = document.createElement("select");
selectP.classList.add("form-control", "p-select");
const c_names = ['abc', 'abcd', 'gef']
for (const c of c_names) {
const option = document.createElement("option");
option.innerText = c;
if (c === "Select") {
option.selected = true;
}
selectC.appendChild(option);
}
// select //
resultsDiv.appendChild(carouselItem);
carouselItem.appendChild(row);
row.appendChild(column);
column.appendChild(card);
card.appendChild(cardBody);
cardBody.appendChild(cardTextUploadedBy);
cardBody.appendChild(cardTextUploadedOn);
cardBody.appendChild(formGroup);
cardBody.appendChild(verifyRow);
verifyRow.appendChild(verifyLegend);
verifyRow.appendChild(verifyDummy);
verifyDummy.appendChild(verifyYesFormCheck);
verifyDummy.appendChild(verifyNoFormCheck);
verifyYesFormCheck.appendChild(yesInput);
verifyYesFormCheck.appendChild(verifyYesLabel);
verifyNoFormCheck.appendChild(noInput);
verifyNoFormCheck.appendChild(verifyNoLabel);
cardBody.appendChild(selectForm);
selectForm.appendChild(selectCLabel);
selectForm.appendChild(selectC);
selectForm.appendChild(selectPLabel);
selectForm.appendChild(selectP);
});
// if needed later
// [...document.querySelectorAll(".verify-yes")].forEach(radio =>  radio.checked=true)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css'>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/advisory-new.css') }}" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<button id="example">Show results</button>
<section class="pt-5 pb-5">
<div class="container">
<div class="row m-auto">
<div class="col-6">
<h3 class="mb-3">Some heading</h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
</svg>
</a>
</div>
<div class="col-md-6 col-lg-4 col-xs-12 col-sm-12 m-auto shadow-lg p-3">
<div id="carouselExampleIndicators2" class="carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner" id="results"></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

这里我已经使用点击监听器来监听动态创建的CCD_ 1按钮，但我完全被困在如何收听动态创建的CCD_ 2->更改侦听器

  • 请单击show results按钮查看转盘项目

非常感谢您的帮助。。。

这里有一个非常基本的实现，使用vanilla-js。

const resultsDiv = document.getElementById("results");
const getList = document.getElementById("example");
document.querySelector(".container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.type && tgt.type === "radio") {
const hide = tgt.classList.contains("verify-no");
[...tgt.closest(".card-body").querySelectorAll("p.card-text")].forEach(par => par.classList.toggle("d-none", hide))
}
})
getList.addEventListener("click", e => {
let results = ['a', 'b', 'c'];
results.forEach((el, idx) => {
//carousel
const carouselItem = document.createElement("div");
if (idx === 1) {
carouselItem.classList.add("carousel-item", "active");
}
carouselItem.classList.add("carousel-item");
//row below carousel
const row = document.createElement("div");
row.classList.add("row");
//column for rows
const column = document.createElement("div");
column.classList.add("col-md-12", "mb-3");
// card for each carousel inside column
const card = document.createElement("div");
card.classList.add("card");
// card body for card
const cardBody = document.createElement("div");
cardBody.classList.add("card-body", "text-center");
// card text (upload info)
const cardTextUploadedOn = document.createElement("p");
cardTextUploadedOn.classList.add("card-text");
cardTextUploadedOn.innerText = "adsadad";
const cardTextUploadedBy = document.createElement("p");
cardTextUploadedBy.classList.add("card-text");
cardTextUploadedBy.innerText = "adsadad";
// show predictions
const formGroup = document.createElement("div");
formGroup.classList.add("form-group", "row");
const predLabel = document.createElement("div");
predLabel.classList.add("col-lg-12");
predLabel.innerText = "Select";
const dummy = document.createElement("div");
dummy.classList.add("col-sm-10");
formGroup.appendChild(predLabel);
formGroup.appendChild(dummy);
// yes / no options
const verifyRow = document.createElement("div");
verifyRow.classList.add("row");
const verifyLegend = document.createElement("legend");
verifyLegend.classList.add("col-form-label", "col-lg-12", "pt-0");
verifyLegend.innerText = "Is this correct ?";
const verifyDummy = document.createElement("div");
verifyDummy.classList.add("col-sm-10");
const verifyYesFormCheck = document.createElement("div");
verifyYesFormCheck.classList.add("form-check");
const verifyNoFormCheck = document.createElement("div");
verifyNoFormCheck.classList.add("form-check");
const yesInput = document.createElement("input");
yesInput.classList.add("form-check-input", "verify-yes");
yesInput.type = "radio";
yesInput.checked = true; // this will check it
yesInput.name = "choosePred" + idx;
yesInput.value = "Yes";
const verifyYesLabel = document.createElement("label");
verifyYesLabel.classList.add("form-check-label", "verify-yes");
verifyYesLabel.innerText = "Yes";
const verifyNoLabel = document.createElement("label");
verifyNoLabel.classList.add("form-check-label", "verify-no");
verifyNoLabel.innerText = "No";
const noInput = document.createElement("input");
noInput.classList.add("form-check-input", "verify-no");
noInput.type = "radio";
noInput.name = "choosePred" + idx;
noInput.value = "No";
// yes no options end
// select //
const selectForm = document.createElement("div");
selectForm.classList.add("form-group", "selectGroup");
const selectCLabel = document.createElement("label");
selectCLabel.innerText = "Select C";
const selectPLabel = document.createElement("label");
selectPLabel.innerText = "Select P";
//select for crop options
const selectC = document.createElement("select");
selectC.classList.add("form-control", "c-select");
selectC.addEventListener("change", e => {
alert('changedC'); //<= event listener
});
//select for pest options
const selectP = document.createElement("select");
selectP.classList.add("form-control", "p-select");
selectP.addEventListener("change", e => {
alert('changedP'); //<= event listener
});
const c_names = ['abc', 'abcd', 'gef']
for (const c of c_names) {
const option = document.createElement("option");
option.innerText = c;
if (c === "Select") {
option.selected = true;
}
selectC.appendChild(option);
}
// select //
resultsDiv.appendChild(carouselItem);
carouselItem.appendChild(row);
row.appendChild(column);
column.appendChild(card);
card.appendChild(cardBody);
cardBody.appendChild(cardTextUploadedBy);
cardBody.appendChild(cardTextUploadedOn);
cardBody.appendChild(formGroup);
cardBody.appendChild(verifyRow);
verifyRow.appendChild(verifyLegend);
verifyRow.appendChild(verifyDummy);
verifyDummy.appendChild(verifyYesFormCheck);
verifyDummy.appendChild(verifyNoFormCheck);
verifyYesFormCheck.appendChild(yesInput);
verifyYesFormCheck.appendChild(verifyYesLabel);
verifyNoFormCheck.appendChild(noInput);
verifyNoFormCheck.appendChild(verifyNoLabel);
cardBody.appendChild(selectForm);
selectForm.appendChild(selectCLabel);
selectForm.appendChild(selectC);
selectForm.appendChild(selectPLabel);
selectForm.appendChild(selectP);
});
// if needed later
// [...document.querySelectorAll(".verify-yes")].forEach(radio =>  radio.checked=true)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css'>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/advisory-new.css') }}" />
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
</head>
<body>
<button id="example">Show results</button>
<section class="pt-5 pb-5">
<div class="container">
<div class="row m-auto">
<div class="col-6">
<h3 class="mb-3">Some heading</h3>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 mr-1" href="#carouselExampleIndicators2" role="button" data-slide="prev">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
</svg>
</a>
<a class="btn btn-primary mb-3 " href="#carouselExampleIndicators2" role="button" data-slide="next">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" />
</svg>
</a>
</div>
<div class="col-md-6 col-lg-4 col-xs-12 col-sm-12 m-auto shadow-lg p-3">
<div id="carouselExampleIndicators2" class="carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner" id="results"></div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

您可以向一个元素添加任意数量的侦听器，它不会取代以前添加的

因此，您可以按照与click事件相同的方式进行操作：


document.querySelector(".container").addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.type && tgt.type === "select-one" /* && some additional checks to identify the correct element, like class, name, … */) {
// do something
}
})

select的type是：

select-multiple，如果可以选择多个值
select-one，如果只能选择一个值。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium