指定class/id的按钮无法触发jQuery脚本，如何修复？

直接原因：jQuery类选择器语法错误 #

代码中使用$("classIneed")选择元素是错误的——jQuery中选择class必须在类名前添加.前缀，正确写法是$(".classIneed")。缺少这个前缀会导致jQuery无法定位到目标按钮，自然无法触发点击事件。

额外优化点 #

1. 重复绑定事件：同一个class的按钮被绑定了两次click事件，完全可以合并成一个函数，避免冗余。
2. 无效的CSS操作：原代码中的$(".cover").css("flex")只是读取flex属性值，没有实际作用。而且fadeIn()方法会把元素的display属性从none改为block，覆盖CSS中设置的display: flex，导致弹窗无法居中。需要在fadeIn的回调函数中手动设置display: flex。

修正后的完整代码 #

JavaScript #

$(function() {
  $(".classIneed").click(function() {
    $(".cover").fadeIn(300, function() {
      // 动画完成后恢复flex布局
      $(this).css("display", "flex");
    });
  });

  $(".cover,.close").click(function() {
    $(".cover").fadeOut(300);
  });

  $(".contents1").click(function(e) {
    e.stopPropagation();
  });
});

CSS #

.cover {
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-size: 100%;
}

.contents1 {
  background: #fff;
  border: 5px solid #ccc;
  border-radius: 30px;
  position: fixed;
  z-index: 5;
  padding: 10px;
  width: 25%;
}

.close {
  position: absolute;
  top: 15px;
  right: 10px;
  transition: all 200ms;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

.test {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 480px) {
  .contents1 {
    width: 85%;
    margin: 10%;
  }
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="classIneed" type="button" style="border:hidden; background:#fff;padding:0px;"> 
  <img  style="padding:0px;" src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/Free-Skillet-HC-India-New-3_091a5e6b-0f58-418d-917c-fdfc9cc17a8b.png?v=1661337873" alt="gh" width="100%" height="10%"/>
</button>

<div class="cover">
  <div class="test">
    <div class="contents1">
      <img src="https://cdn.shopify.com/s/files/1/0462/5488/2983/files/imgonline-com-ua-resizePERCRgtKVzgcOWZp.jpg?v=1665123456" alt="gh" width="100%" height="100%" />
      <span class="close">&times;</span>
    </div>
  </div>
</div>

效果说明 #

• 修正选择器后，点击指定class的按钮会正常触发弹窗淡入效果。
• 通过回调设置display: flex，保证弹窗内容居中显示。
• 关闭按钮和遮罩层的点击逻辑、内容区域阻止冒泡的功能保持不变。

内容的提问来源于stack exchange，提问作者ryuk