UIkit 3 事件不工作

Question

我一直在尝试向仅在满足特定条件时显示的按钮添加 tooltip。我正在使用 uikit@3.0.0-beta.35。根据文档，我应该在 beforeshow 事件上 return 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;
});

不幸的是，none 这些方法对我有用。

Answer 1

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

关于这个

还有一个新鲜的假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>

Answer 2

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

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

文档让我困惑了很长时间:(

Answer 3

切换器：

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

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

UIkit 3 事件不工作

UIkit 3 Event is not working

getuikit