getuikit - UIkit 3 事件不起作用

Question

我一直在尝试将工具提示添加到仅在满足某些条件时才显示的按钮。我正在使用 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 文档中提到的这种语法：

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

不幸的是，这些方法都不适合我。

Answer 1

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

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

文档让我很困惑:(

Answer 2

您的代码的问题是，您试图直接在元素上监听一个事件，而该事件是在文档上触发的 - 文档中有一个错误，因为他们说它是在元素上触发的，但它是不是。

还有一个关于此的新错误错误报告

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>

Answer 3

对于切换器：

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

我将来可能也需要这个答案......