UIkit 3 事件不起作用答案

【问题标题】：UIkit 3 Event is not workingUIkit 3 事件不起作用
【发布时间】：2021-08-13 14:23:26
【问题描述】：

我一直在尝试将tooltip 添加到仅在满足某些条件时才显示的按钮。我正在使用 uikit@3.0.0-beta.35。根据文档，我应该在 beforeshow 事件上返回 false。

UIkit.tooltip($element, { pos: 'top' });

$element.on('beforeshow', function(){
  return false;
});

if(condition){
 UIkit.tooltip($element).show();
}

问题是beforeshow 函数由于某种原因永远不会触发。我什至尝试过UIkit documentation中提到的这种语法：

UIkit.util.on($element, 'beforeshow', function () {
  return false;
});

很遗憾，这些方法都不适合我。

【问题讨论】：

标签： getuikit

【解决方案1】：

文档有一些错误，切换器也有同样的问题。该事件是在document 而不是target 上触发的。你可以像这样使用这个语法：

UIkit.util.on(document, 'event', '#target-id', callback)

文档让我很困惑:(

【讨论】：

UIkit.util.on() 是否特别记录在某处？我没有遇到过，只有UIkit.[component-name](".my_div").[method-name]();之类的东西。谢谢。 编辑： 我在这里看到过一次：getuikit.com/docs/javascript

【解决方案2】：

您的代码的问题是，您试图直接在元素上侦听事件，而该事件是在文档上触发的 - 文档中存在错误，因为他们说它是在元素上触发的，但事实并非如此。

关于这个还有一个新鲜的假bug report

var $element = $('#hoverButton');
var $check = $('#tooltipToggle');

UIkit.tooltip($element);

$(document).on('beforeshow', $element, function() {
  if (!$check.prop('checked')) return false;
});

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>

<div class="uk-position-center">
  <label>show tooltip <input id="tooltipToggle" class="uk-checkbox" type="checkbox"></label><br><br>
  <button id="hoverButton" class="uk-button uk-button-default" title="Hello World">Hover</button>
</div>

【讨论】：

【解决方案3】：

对于切换器：

$(document).on('show', $('#switcherId'), function(){
    console.log('fired');
});

我以后可能也需要这个答案……

【讨论】：