Question

我想用vanilla JS制作递归模态，即每个模态中都有一个按钮，可以在当前模态中打开另一个模态。所以，我有一个按钮，在主父div中附加一个div。问题是该按钮失去了onClick Property。

有人可以解释一下，为什么会发生这种情况。

    var modal = document.getElementById('myModal');
console.log("InitButton",modal);

var modalParent = document.querySelector('.modalParent');
console.log("ModalParent",modalParent);

var initBtn = document.getElementById("initialModal");
console.log("InitButton",initBtn);

var btn = document.getElementById("modalButton");
console.log("InitButton",btn);

modalParent.addEventListener('click',clickHandler)


initBtn.onclick = function() {
    modal.style.display = "block";
}

var i = 0
function clickHandler(e){
    if(e.target.matches('.modalButton')){
        clone = modal.cloneNode(true);
        clone.id = "new_Clone_" + i;
        console.log("ClassName", clone.id);
        modalParent.appendChild(clone);
        i++; 
    } 
}

这是JS文件

HTML文件是

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>
<body>
    <div class="Head">
        <button id = "initialModal">Open Modal</button>
        <div class="modalParent" id = "modalParent">
            <div class="modal" id = "myModal">
                <div class="modal-content">
                    <p>Some Text in Modal</p>
                    <button id = "modalButton">Open Modal</button>
                </div>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Answer 1

您的问题基本上就是这一行（错误地使用了matches）

if(e.target.matches('.modalButton')){ //you are matching a class while the modalButton has an id

同样根据相同的文档（上面分享的链接），这是一个非标准的API，因此请将其替换为简单的match

if (e.target.id.match('modalButton'))

＆＃13;

var modal = document.getElementById('myModal');
console.log("InitButton", modal);

var modalParent = document.querySelector('.modalParent');
console.log("ModalParent", modalParent);

var initBtn = document.getElementById("initialModal");
console.log("InitButton", initBtn);

var btn = document.getElementById("modalButton");
console.log("InitButton", btn);

modalParent.addEventListener('click', clickHandler);


initBtn.onclick = function() {
  modal.style.display = "block";
};

var i = 0;

function clickHandler(e) 
{
  if (e.target.id.match('modalButton')) 
  {
    clone = modal.cloneNode(true);
    clone.id = "new_Clone_" + i;
    console.log("ClassName", clone.id);
    modalParent.appendChild(clone);
    i++;
  }
}

＆＃13;

<div class="Head">
  <button id="initialModal">Open Modal</button>
  <div class="modalParent" id="modalParent">
    <div class="modal" id="myModal">
      <div class="modal-content">
        <p>Some Text in Modal</p>
        <button id="modalButton">Open Modal</button>
      </div>
    </div>
  </div>
</div>

＆＃13;

.appendChild后按钮松散引用

1 个答案: