JQuery Dialog关闭后无法再次显示的问题求助

首先，咱们来拆解下你遇到的问题根源：
当你点击<input type="submit">按钮触发$('#test').show()时，这个点击事件会冒泡到window对象，紧接着就触发了你绑定在window上的click事件处理函数。此时e.target是这个submit按钮，满足$(e.target).not("#test")的条件，所以刚显示出来的dialog立刻又被隐藏了——这就是为什么你看不到它再次显示的核心原因。

你的修复尝试之所以无效，是因为$("#test").css("display","block")是设置display属性为block，而非判断它当前是否处于显示状态，这个语句的返回值始终是jQuery对象（属于真值），所以每次都会重复绑定window的click事件，反而会让问题变得更糟。

下面给你几个可行的解决方案：

方案一：阻止显示按钮的事件冒泡 #

在触发dialog显示的按钮上，阻止事件冒泡到window，这样window的click事件就不会被触发：

<input type="submit" onclick="$('#test').show(); event.stopPropagation();">

对应的window事件处理函数可以保留你原来的版本：

$(window).on("click",function(e){ 
  if($(e.target).not("#test")){ 
    $("#test").hide(); 
  } 
});

方案二：在window事件中排除显示按钮 #

修改window的click事件处理逻辑，判断点击目标既不是dialog本身，也不是触发显示的按钮：

$(window).on("click",function(e){ 
  const $target = $(e.target);
  if(!$target.is("#test") && !$target.is('input[type="submit"]')){ 
    $("#test").hide(); 
  } 
});

这种方式不需要修改按钮的onclick代码，逻辑更集中。

方案三：使用原生Dialog的API（更推荐） #

HTML5的<dialog>元素本身有原生的交互逻辑，我们可以直接监听它的点击事件，判断是否点击了背景区域来关闭，这样更简洁也更符合规范：

$("#test").on("click", function(e) {
  // 判断点击的是dialog的背景区域（而非内部内容）
  if (e.target === this) {
    $(this).hide();
  }
});

这种方式不需要给window绑定任何事件，只需要监听dialog自身的点击事件，逻辑清晰，也不会和其他元素的点击事件冲突。

额外小建议 #

• 尽量避免使用内联的onclick属性，推荐用jQuery的事件绑定统一管理，比如：

  $('input[type="submit"]').on('click', function(e) {
    e.stopPropagation(); // 如果用方案一的话
    $('#test').show();
  });
  

• 如果你需要动态绑定/解绑事件，记得用off()移除之前的事件处理程序，避免重复绑定导致的逻辑混乱。

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