How do you rebind jQueryUI tooltip?
-
08-07-2021 - |
문제
I am using jQueryUI tooltip on one of my page.
$('.sourceItem').hover(function () {
$(this).find('.tooltip').show();
$(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
});
$('.sourceItem').mouseleave(function () {
$('.tooltip').hide();
});
here my html code:
<div id="sourceBoxInner">
<div class="sourceItem" id="9003">
<img src="/Pictures/Fruit/apple.png" alt="apple w/ skin, raw"/><br />
<a href="#" class="linkToolTip" title="apple w/ skin, raw">apple w/ skin, raw</a>
<div class="tooltip">
<div class="arrow">
▲</div>
<div class="text">apple w/ skin, raw<br /> 09003<br /> </div>
</div>
</div>
<div class="sourceItem" id="9004">
<img src="/Pictures/Fruit/apple.png" alt="apple w/out skin, raw"/><br />
<a href="#" class="linkToolTip" title="apple w/out skin, raw">apple w/out skin, raw</a>
<div class="tooltip">
<div class="arrow">
▲</div>
<div class="text">apple w/out skin, raw<br /> 09004<br /> </div>
</div>
</div>
</div>
So far, everything works, I can see the tooltip, when I hover on it.
Now, I make an ajax call to repopulate "sourceBoxInner" div. The tooltip stops working. I think I need to rebind it. so in the ajax OnSuccess method, I add following code again. but still does not work.
function OnSuccess() {
$('.sourceItem').hover(function () {
$(this).find('.tooltip').show();
$(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
});
$('.sourceItem').mouseleave(function () {
$('.tooltip').hide();
});
}
Updates:
I also tried following code, still not working.
function OnSuccess() {
$(".sourceItem").unbind("hover").hover(function () {
$(this).find('.tooltip').show();
$(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
});
}
해결책
You can try this
$(document).on('mouseenter', '.sourceItem', function(){
$(this).find('.tooltip').show();
$(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
}).on('mouseleave', '.sourceItem', function(){
$('.tooltip').hide();
});
다른 팁
You can either rebind as you suggest, or use either .live()
if you have an older version of jQuery ( now deprecated ), or .on()
, which would be preferred.
$(document).on({
hover: function () {
$(this).find('.tooltip').show();
$(this).find('.tooltip').position({ at: 'bottom center', of: $(this), my: 'top' });
},
mouseleave: function () {
$('.tooltip').hide();
}
},'.sourceItem');
edit: had to fix my selector
제휴하지 않습니다 StackOverflow