Question

我一直在尝试将UIkit documentation添加到仅在满足某些条件时显示的按钮。我使用的是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函数从不会因某种原因而触发。我甚至试过More Details中提到的这种语法：

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

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

Answer 1

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

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

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

Answer 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>

UIkit 3事件无法正常工作

2 个答案: