0
Далее я открою всплывающую подсказку для элемента p после нажатия кнопки и закроет всплывающую подсказку, если кнопка снова нажата.Запретить всплывающую подсказку jQuery для мыши с динамически добавленным классом
$(document).ready(function() {
var obj = null;
$('input').click(function() {
if (obj == null) {
obj = $('p');
obj.tooltip({
items: 'p',
content: 'Some help'
});
obj.tooltip("open");
} else {
obj.tooltip('disable');
obj = null;
}
});
$('.help').mouseenter(function(e) {
e.stopImmediatePropagation();
});
$('.help').mouseleave(function(e) {
e.stopImmediatePropagation();
});
});<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type='button' value='Click me' />
<p class='help'>
Some text
</p>То, что я пытаюсь сделать сейчас, это то же самое, за исключением того, что я динамическое добавление класса «помощь» к p элементу, когда кнопка нажата. Вместо того, чтобы всплывающая подсказка оставалась открытой, она исчезает на мыши. Я заметил, что обработчики mouseenter()/mouseleave() не срабатывали, поэтому я заменил их on(). События теперь срабатывают, но всплывающая подсказка все еще закрывается.
$(document).ready(function() {
var obj = null;
$('input').click(function() {
if (obj == null) {
obj = $('p');
obj.tooltip({
items: 'p',
content: 'Some help'
});
obj.tooltip("open");
obj.addClass('help'); // Added statically in DOM in above snippet
} else {
obj.tooltip('disable');
obj = null;
}
});
$(document.body).on('mouseenter', '.help', function(e) {
//console.log('on mouseenter');
e.stopImmediatePropagation();
});
$(document.body).on('mouseleave', '.help', function(e) {
//console.log('on mouseleave');
e.stopImmediatePropagation();
});
});<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input type = 'button' value = 'Click me' />
<p>
Some text
</p>