截取使用JavaScript从DOM中删除的元素上的click事件

我有点奇怪的情况。我需要执行一个点击事件（拦截），下面是我的例子。默认情况下，元素（div）从DOM中删除，这意味着div仅在用户单击按钮时出现，下面是该按钮的图像

当用户单击按钮时，将显示内容，如下图所示：

我想实现什么？

我正在尝试实现这一点，当用户单击我想为出现的一个div添加样式的按钮时，我在下图中模拟了这一点：

到目前为止，我的代码如下所示：

var buttons = document.querySelectorAll('button.h5p-image-hotspot');
  for (var i = 0; i < buttons.length; i++) {
      buttons[i].addEventListener('click', function(){
        var myNodelist = document.querySelectorAll('.h5p-image')
        var i;
        for (i = 0; i < myNodelist.length; i++) {
          myNodelist[i].style.width = "300px";
        }
      });
  }

var buttons=document.querySelectorAll（'button.h5p图像热点'）；
对于（变量i=0；i

---

但是这不起作用，有人能帮我吗？

@Clone已经给了我一个很好的提示。覆盖样式表将是实现这一点的最干净的方法，因为您希望所有图像都受到影响

有了H5P，你现在有了多种选择，所有的选择都有其优缺点

修补 例如，您可以修补代码。那么你所要做的就是添加

.h5p-image-hotspot-popup-body-fraction.h5p-image {
    width: 300px;
}

在你的系统上。但是，每当您更新H5P图像热点内容类型时，必须重新应用更改的内容类型，因为官方代码将覆盖它们

分叉 您可以在fork中执行同样的操作，这意味着您必须克隆完整的内容库文件，并更改library.json（）中的machineName以及代码本身中出现的内容（也是类名）。这里的缺点是，如果您想从错误修复或新功能中获益，就必须将原始代码的更新合并到fork中

钩住

---

幸运的是，H5P提供了用于添加脚本或更改样式表的钩子，您必须为主机系统选择合适的插件（例如WordPress、Drupal或moodle-moodle 3.8+的本机核心版本没有钩子，不幸的是，只有H5P插件有钩子），实现alter_styles函数来加载CSS文件（参见中的示例），然后将前面提到的CSS放到该文件中。现在，每当H5P加载内容时，它都会使用您的样式表覆盖自己的样式表，而无需接触原始H5P代码，这样您就可以从更新中获益，而不必重新应用修补程序。

请帮助我澄清一些问题。1.是否还有其他地方显示最初不可见的div的click事件？2.您不希望手动将宽度添加到HTML代码中的div？？如果在单击按钮时它不在HTML中，则不需要拦截单击。您需要等待单击完成，然后才能应用样式。但是为什么不单独使用CSS呢？CSS可以为页面上的任何元素设置样式。