javascript - onClick -> Fiddle 在第一次点击时起作用，但停止工作 - 神秘

Question

我有这个jsfiddle一次有效。

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x){
  alert(x);
  var mask = document.createElement('div');
  mask.id = 'maskIt';
  mask.setAttribute("class", "maskIt");
  mask.onclick = function(){toggle_off('maskIt');}
  mask.innerHTML = 'click to close mask';
  document.body.appendChild(mask);
}

单击时，它会打开一个蒙版(图层)，单击蒙版时 - 会自行关闭 - 到这里为止一切都很好。

第二次单击时， mask 会再次打开，但当您第二次单击它时，它不会关闭。

有什么想法吗？

Answer 1

您不应隐藏该 div，而是应将其删除，因为每次点击都会创建一个新的 div

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  var mask = document.getElementById(itemID);
  mask.parentNode.removeChild(mask);
}

DEMO