如何点击id为mydiv的div时触发其内部隐藏按钮的点击事件？

没问题，这事儿好办！要实现点击#mydiv元素时触发它内部隐藏按钮的点击操作，咱们可以用原生JavaScript或者jQuery来搞定，下面给你具体的实现方案：

原生JavaScript实现（推荐，无需依赖库） #

首先先确认你的HTML结构是这样的：

<div id="mydiv">
  <div>
    <button style="visibility:hidden; float:left"></button>
  </div>
</div>

然后添加如下JS代码：

// 获取目标父容器
const myDiv = document.getElementById('mydiv');

// 为父容器绑定点击事件
myDiv.addEventListener('click', function() {
  // 在父容器内部查找隐藏按钮
  const hiddenButton = this.querySelector('button');
  
  // 确保按钮存在后再触发点击，避免报错
  if (hiddenButton) {
    hiddenButton.click();
  }
});

关键说明： #

• 用querySelector从#mydiv内部查找按钮，确保只会操作当前容器内的按钮，不会影响页面上其他按钮。
• 增加了按钮存在性判断，防止因为DOM结构变化导致的报错。

jQuery实现（如果你项目中已经在用jQuery） #

如果你的项目依赖jQuery，可以用更简洁的代码实现：

$('#mydiv').on('click', function() {
  // 查找当前容器内的按钮并触发点击
  $(this).find('button').click();
});

处理动态生成的按钮 #

如果你的按钮是后续动态添加到#mydiv里的，上面的直接绑定方式会失效，这时候需要用事件委托：

原生JS事件委托 #

document.addEventListener('click', function(e) {
  // 判断点击的元素是否在#mydiv内部
  const targetDiv = e.target.closest('#mydiv');
  if (targetDiv) {
    const hiddenButton = targetDiv.querySelector('button');
    if (hiddenButton) {
      hiddenButton.click();
    }
  }
});

jQuery事件委托 #

$(document).on('click', '#mydiv', function() {
  $(this).find('button').click();
});

这样不管按钮是一开始就存在还是后来动态生成的，点击#mydiv都能触发按钮的点击操作啦！

内容的提问来源于stack exchange，提问作者Hassan El khalifte