按钮点击异常：首次单击可打开模态div，后续需双击重开

我有3个按钮，点击后会在表格上显示一个小型div（模态框）。首次点击按钮时，单击就能打开模态框，选择操作后模态框关闭；但关闭后，必须双击按钮才能重新打开。这肯定是个小问题，只是暂时没找到原因。下面是我的初始代码和更新后的代码：

初始代码 #

<script>
    $(document).ready(function (e) {
        $("#@additionalButtonID,#@additionalButtonID2,#@additionalButtonID3").on("click", function (e) {
                $ClickedItem = $(this);
                $("div#@Model.UniqueTableIdentifier").css("left", e.clientX - 150);
                $("div#@Model.UniqueTableIdentifier").css("top", e.clientY);
              
                $("div#@Model.UniqueTableIdentifier").fadeIn(200, function () {
                    $(document).on("click", function (e) {
                        if (!e.target.classList.contains("additionalButtons")) {
                            $("div#@Model.UniqueTableIdentifier").hide();
                        }
                    });
                })
        });
    });
   
    $(" .btn-tbl-buttons").on("click", function () {
        $("div#@Model.UniqueTableIdentifier").hide();
    });

    $(" .list-tbl-items").on("click", function (e) {
        if ((e.target).querySelector('button') != null) {
            (e.target).querySelector('button').click();
            e.stopPropagation();
            e.preventDefault();
        }
    });
</script>

更新后代码 #

<script>
let divIsFadedIn = false;

$("#@additionalButtonID, #@additionalButtonID2, #@additionalButtonID3").on("click", function(e) {
  e.stopPropagation(); // 阻止事件冒泡到document元素
  const div = $("div#div-@Model.UniqueTableIdentifier");
    $("div#div-@Model.UniqueTableIdentifier").css("left", e.clientX -150);
    $("div#div-@Model.UniqueTableIdentifier").css("top", e.clientY);
  div.fadeIn(200);
});
    
$(document).on("click", function(e) {
  if (!$(e.target).next("div#div-@Model.UniqueTableIdentifier, div#div-@Model.UniqueTableIdentifier  *").length) {
    $("div#div-@Model.UniqueTableIdentifier").fadeOut(200);
  }
});

   
    $(" .btn-tbl-buttons").on("click", function (e) {
        $("div#div-@Model.UniqueTableIdentifier").fadeOut(200);
        e.stopPropagation();
    });

    $(" .list-tbl-items").on("click", function (e) {
        if ((e.target).querySelector('button') != null) {
            (e.target).querySelector('button').click();
            e.stopPropagation();
        }
    });
</script>

问题原因及修复方案 #

核心问题 #

更新后的代码中，$(document)绑定的点击事件判断逻辑错误：!$(e.target).next("div#div-@Model.UniqueTableIdentifier, div#div-@Model.UniqueTableIdentifier *").length 无法正确识别点击目标是触发按钮本身。点击按钮时，该条件会成立，导致模态框刚完成fadeIn就立刻执行fadeOut，看起来像是首次点击没生效，必须第二次点击才能正常显示。

另外，按钮点击事件中的e.stopPropagation()仅阻止事件冒泡，无法阻止document的事件捕获，所以点击行为仍会被document的事件监听捕获到。

修复后的代码 #

<script>
const modalSelector = "div#div-@Model.UniqueTableIdentifier";
const buttonSelector = "#@additionalButtonID, #@additionalButtonID2, #@additionalButtonID3";

$(buttonSelector).on("click", function(e) {
  e.stopPropagation();
  const $modal = $(modalSelector);
  $modal.css({
    left: e.clientX - 150,
    top: e.clientY
  }).fadeIn(200);
});

$(document).on("click", function(e) {
  const $target = $(e.target);
  // 仅在点击目标不是按钮、也不在模态框内部时，关闭模态框
  if (!$target.is(buttonSelector) && !$target.closest(modalSelector).length) {
    $(modalSelector).fadeOut(200);
  }
});

$(".btn-tbl-buttons").on("click", function(e) {
  $(modalSelector).fadeOut(200);
  e.stopPropagation();
});

$(".list-tbl-items").on("click", function(e) {
  const btn = e.target.querySelector('button');
  if (btn) {
    btn.click();
    e.stopPropagation();
  }
});
</script>

关键改进点 #

1. 使用closest()方法判断点击元素是否在模态框内，比原代码的next()更准确，无需依赖按钮与模态框的兄弟元素关系
2. 统一管理选择器变量，避免重复编写，提升代码可维护性
3. 移除无用的divIsFadedIn变量，简化逻辑
4. 精准控制模态框关闭条件，避免刚打开就被关闭的问题

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