UIkit 3 Event не работает

Я пытался добавить всплывающую подсказку к кнопке, которая отображается только при соблюдении определенных условий. Я использую [email protected]. Согласно документации, я должен возвращать false при событии beforeshow.

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;
});

К сожалению, ни один из этих методов у меня не помог.


getuikit
person Yousif Al-Raheem    schedule 18.11.2017    source источник

Ответы (2)


arrow_upward
10
arrow_downward

в документации есть ошибка, у переключателя такая же проблема. событие запускается document, а не target. вы можете использовать этот синтаксис следующим образом:

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

документация меня долго смущала :(

person Jarvis    schedule 26.01.2018
comment
UIkit.util.on() где-то задокументировано? Не встречал, только такие вещи, как UIkit.[component-name](".my_div").[method-name]();. Спасибо. Изменить: Я вижу, что это упоминалось здесь однажды: getuikit.com/docs/javascript - person user1063287; 09.07.2020

arrow_upward
3
arrow_downward

Проблема с вашим кодом заключается в том, что вы пытаетесь прослушать событие непосредственно в элементе, в то время как событие запускается в документе - в документации есть ошибка, поскольку они говорят, что оно запускается на элементе, но это нет.

Также есть свежий ложный отчет об ошибке, касающийся этого

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>

person moped    schedule 28.11.2017