如何使用动态添加的按钮打开模式 Window - 纯 JavaScript

Question

我正在从多个网址抓取一些 JSON 数据。我在 table 中显示它们。它还为每一行创建按钮。我想在单击动态创建的按钮之一时弹出一个模态 window 。我正在使用 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">&times;</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 只动物的信息”之前，当我们单击“提交”按钮时，它会弹出模式 window 但在单击“获取 3 只动物的信息”之后，它会创建三个包含一些详细信息的按钮，但现在是提交按钮按钮无法正常工作。

我希望代码在单击动态创建的按钮时打开模态 window。（提交按钮只是为了展示我想做的事情。）

Answer 1

当您覆盖父 div 的 document.getElementById("animal-info").innerHTML 时，您正在擦除模态框。

你只需要将模式移出 "animal-info" div，像这样：https://jsfiddle.net/sa2gt79x/

如何使用动态添加的按钮打开模式 Window - 纯 JavaScript

How to open Modal Window with Dynamically added buttons - Pure JavaScript

javascript

dynamic

button

modalviewcontroller

modal-window