Question

我想要实现的功能：

输入[type =＆＃34;提交＆＃34;]点击应在段落中创建另一个按钮，当我再次点击此新按钮时，它将恢复为输入表单。

以下是代码：

inputPar = document.querySelector("#oldpar .myText");
oldPar = document.querySelector("#oldpar"); 
newPar = document.querySelector("#newpar");
function writePar(e) {
    newPar.innerHTML = htmlEntities(inputPar.value) + '<br/>' + '<button 
       class="myBtn">Click Me</button>';
    newPar.style.display="block";
    oldPar.style.display = "none";
    e.stopPropagation();
}
function revertMe(e) {
    oldPar.style.display="block";
    newPar.style.display="none";
    e.stopPropagation();
}
var submitPar = document.getElementById("oldpar").querySelector('input[type="submit"]');
submitPar.addEventListener("click", writePar); 

var myBtn = document.getElementsByClassName("myBtn");
myBtn.addEventListener("click", revertMe);

这是我尝试使用的HTML代码。

<p id="oldpar">
   <input class="myText" type="text" maxlength="450"/>
   <br/>
   <input type="submit" value="Submit My Value"/></p>
<p id="newpar"></p>

我认为在第一次点击事件已经创建的元素上调用第二次点击事件是错误的吗？

是否有不同的听众流程？

控制台显示myBtn.addEventListener is not a function。为什么这样？

Answer 1

当您尝试在其上注册事件侦听器时，该按钮不存在。

其中一个解决方案是在按钮实际存在时注册click事件，方法是在将writePar()注入DOM后将其设置在.myBtn方法内，如下所示：

function writePar(e) {
  newPar.innerHTML = htmlEntities(inputPar.value) + '<br/>' + '<button class="myBtn">Click Me</button>';
  newPar.style.display="block";
  oldPar.style.display = "none";
  var myBtn = document.querySelector(".myBtn");
  myBtn.addEventListener("click", revertMe);
  e.stopPropagation();
}

Codepen Demo

另一种解决方案是在最近的静态元素上使用event delegation（在您的情况下，它将是#newpar）。 F.ex：

//var myBtn = document.getElementsByClassName("myBtn");
//myBtn.addEventListener("click", revertMe);

newPar.addEventListener("click", function(e){
  if (e.target && e.target.matches(".myBtn")) {
    revertMe(e);
  }
});

Codepen Demo

连续事件不适用于从上一个事件创建的元素

1 个答案: