如何使用动态添加的按钮打开模态窗口 - 纯 JavaScript
Posted
技术标签:
【中文标题】如何使用动态添加的按钮打开模态窗口 - 纯 JavaScript【英文标题】：How to open Modal Window with Dynamically added buttons - Pure JavaScript 【发布时间】：2018-10-03 11:22:11 【问题描述】：我正在从多个 url 中获取一些 JSON 数据。我将它们显示在表格中。它还为每一行创建按钮。我想在单击动态创建的按钮之一时弹出一个模式窗口。我正在使用 html、CSS 和纯 javascript。
HTML 代码在这里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ajax_json.css">
<title>Learning with AJAX and JSON</title>
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Animals</button>
</header>
<button id="xyz">Submit</button>
<div id="animal-info">
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p id="modal-data">Some text in the Modal..</p>
</div>
</div>
</div>
</body>
<script src="table.js"></script>
</html>
CSS 代码在这里：
html, body
padding: 0;
margin: 0;
.hide-me
visibility: hidden;
opacity: 0;
transform: scale(.75);
h1
margin-top: 0;
font-size: 2.4em;
font-weight: normal;
display: inline-block;
body
font-family: Helvetica, sans-serif;
padding: 50px 10%;
button
background-color: #000000;
color: #FFF;
border: none;
padding: 7px 10px;
font-size: 10px;
border-radius: 5px;
outline: none;
box-shadow: 0 0 0 0;
margin-bottom: 8px;
margin-left: 10px;
position: relative;
button:hover
background-color: #034F66;
#tbo
border-collapse: collapse;
min-width: 500px;
.modal
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
.modal-content
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
.close
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
.close:hover, .close:focus
color: #000;
text-decoration: none;
cursor: pointer;
这里有 JavaScript 代码：
var txt = "<table id='tbo' border='1'><tr><th>Animal Name</th><th>Species</th><th>Likes</th><th>Dislikes</th><th>Action</th></tr>";
var pageCounter = 1;
var btnCounter = 1;
var btn = document.getElementById("btn");
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var para = document.getElementById("modal-data");
var dataOne = "";
var dataTwo = "";
var dataThree = "";
var dataFour = "";
var dataFive = "";
var dataSix = "";
var dataSeven = "";
var dataEight = "";
var dataNine = "";
var button = document.getElementById("xyz");
button.onclick = function()
modal.style.display = "block";
span.onclick = function()
modal.style.display = "none";
window.onclick = function(event)
if (event.target == modal)
modal.style.display = "none";
btn.addEventListener("click", function ()
var ourRequest = new XMLHttpRequest();
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
ourRequest.onload = function ()
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
ourRequest.send();
pageCounter++;
if (pageCounter > 3)
btn.classList.add("hide-me");
);
function renderHTML(data)
for (x in data)
txt += "<tr><td>" + data[x].name + "</td><td>" + data[x].species +
"</td><td>" + data[x].foods.likes + "</td><td>" + data[x].foods.dislikes +
"</td><td><button id='abc" + btnCounter + "'>Display</button></td></tr>";
if (btnCounter == 1)
dataOne = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 2)
dataTwo = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 3)
dataThree = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 4)
dataFour = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 5)
dataFive = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 6)
dataSix = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 7)
dataSeven = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 8)
dataEight = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
else if (btnCounter == 9)
dataNine = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
+ data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
btnCounter++;
document.getElementById("animal-info").innerHTML = txt;
var btnOne = document.getElementById("abc1");
var btnTwo = document.getElementById("abc2");
var btnThree = document.getElementById("abc3");
var btnFour = document.getElementById("abc4");
var btnFive = document.getElementById("abc5");
var btnSix = document.getElementById("abc6");
var btnSeven = document.getElementById("abc7");
var btnEight = document.getElementById("abc8");
var btnNine = document.getElementById("abc9");
if ((pageCounter == 2) || (pageCounter == 3) || (pageCounter == 4))
btnOne.onclick = function()
modal.style.display = "block";
console.log(dataOne);
btnTwo.onclick = function()
modal.style.display = "block";
console.log(dataTwo);
btnThree.onclick = function()
modal.style.display = "block";
console.log(dataThree);
if (pageCounter == 3)
btnFour.onclick = function()
modal.style.display = "block";
console.log(dataFour);
btnFive.onclick = function()
modal.style.display = "block";
console.log(dataFive);
btnSix.onclick = function()
modal.style.display = "block";
console.log(dataSix);
else if (pageCounter == 4)
btnFour.onclick = function()
modal.style.display = "block";
console.log(dataFour);
btnFive.onclick = function()
modal.style.display = "block";
console.log(dataFive);
btnSix.onclick = function()
modal.style.display = "block";
console.log(dataSix);
btnSeven.onclick = function()
modal.style.display = "block";
console.log(dataSeven);
btnEight.onclick = function()
modal.style.display = "block";
console.log(dataEight);
btnNine.onclick = function()
modal.style.display = "block";
console.log(dataNine);
span.onclick = function()
modal.style.display = "none";
window.onclick = function(event)
if (event.target == modal)
modal.style.display = "none";
您可以从这里查看程序的运行情况： https://jsfiddle.net/asad2195/d9wv40t6/40/
在单击获取 3 只动物的信息之前，当我们单击提交按钮时，它会弹出模态窗口，但在单击获取 3 只动物的信息后，它会创建三个带有一些详细信息的按钮，但现在提交按钮无法像以前那样工作。
我希望代码在我单击动态创建的按钮时打开模式窗口。 （提交按钮只是为了显示我想做什么。）
【问题讨论】：
for (x in data) - 这里的 x 在遍历所有索引后也将具有 'length' 的值。这将导致评估data[x].foods.likes 失败，因为data['length'].foods 未定义。您应该使用for (var i = 0; i < data.length; i++) 或使用for..of 循环。
【参考方案1】：
当您覆盖父 div 的 document.getElementById("animal-info").innerHTML 时，您正在擦除模式。
您只需要将模态框移出“animal-info” div，如下所示：https://jsfiddle.net/sa2gt79x/
【讨论】：
是的，它工作，有时你需要一个完美的建议，谢谢。以上是关于如何使用动态添加的按钮打开模态窗口 - 纯 JavaScript的主要内容，如果未能解决你的问题，请参考以下文章
showdialog()的窗体点击message的按钮后，窗体也关闭了？