Semantic UI popup点击触发后仅首次可自动隐藏问题求助

异常原因 #

• 重复初始化popup组件：每次触发点击事件时，都会重新调用$('.button').popup({配置})对组件进行重复初始化，会导致Semantic UI内部维护的组件状态混乱，控制指令无法正常响应。
• jQuery队列逻辑问题：使用的delay()和queue()默认作用于jQuery的fx动画队列，且queue回调函数中没有调用next()方法释放队列，第一次执行完毕后队列处于阻塞状态，第二次点击时的hide逻辑根本不会被执行。

修复方案 #

推荐使用更稳妥的setTimeout替代jQuery队列逻辑，同时将popup初始化操作移到点击事件外，仅执行一次：

修复后的JavaScript代码 #

// 页面加载完成后仅初始化一次popup
$(() => {
  $('.button').popup({
    on: 'manual',
    inline: true
  })
})

function myFunction() {
  const $btn = $('.button')
  $btn.popup('show')
  // 用setTimeout实现延迟隐藏，避开jQuery队列坑
  setTimeout(() => {
    $btn.popup('hide')
  }, 500)
}

如果坚持要使用jQuery队列写法，需要在queue回调中执行next()释放队列，同时避免重复初始化：

$(() => {
  $('.button').popup({
    on: 'manual',
    inline: true
  })
})

function myFunction() {
  $('.button').popup('show')
    .delay(500)
    .queue(function(next) {
      $(this).popup("hide")
      next() // 必须调用next释放队列，后续点击才能正常执行
    })
}

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