我使用以下代码在mouseover
触发事件时显示工具提示.iconImage
:
$('body').append('<span id="note-tooltip-wrapper"><a href="#" class="close">Slet <img src="/images/note-close-icon.png"></a><span class="content"></span><span class="bottom"><a href="#" class="edit">Ret</a></span></span>');
$('.show .iconimage').wrap("<span class='note-tip-wrapper'></span>").closest('.note-tip-wrapper').css({ 'position': 'relative' });
$('.show .iconimage').mouseover(function () {
var $tipheight = $(this).closest('.note-tip-wrapper').find('.show .iconimage').height();
var $tipwidth = $(this).closest('.note-tip-wrapper').find('.show .iconimage').width();
var $html = $(this).closest('p.show').next('.longnote').html();
$('#note-tooltip-wrapper').appendTo($(this).closest('.note-tip-wrapper')).fadeIn(300).css({ 'position': 'absolute', 'left': 0, 'top': 0, 'z-index': '10000' }).find('.content').html($html);
$('#note-tooltip-wrapper .save').trigger('click');
});
$('#note-tooltip-wrapper').mouseleave(function() {
$(this).fadeOut(300);
});
//$('#note-tooltip-wrapper .close').live('click', function () {
// $(this).closest('#note-tooltip-wrapper').hide();
//});
$('#note-tooltip-wrapper .edit').live('click', function () {
$(this).removeClass('edit').addClass('save').text('spare');
var $html = $(this).closest('#note-tooltip-wrapper').find('.content .editNote').html();
$(this).closest('#note-tooltip-wrapper').find('.content .editNote').html('<textarea cols="5" rows="5">' + $html + '</textarea>');
});
$('#note-tooltip-wrapper .save').live('click', function () {
$(this).removeClass('save').addClass('edit').text('ret');
var $html = $(this).closest('#note-tooltip-wrapper').find('.content textarea').val();
//console.log($html)
$(this).closest('#note-tooltip-wrapper').find('.content .editNote').html($html);
$(this).closest('p.show').next('.longnote').find('.editNote').html($html);
});
mouseover
此代码在和上正确显示工具提示mouseout
,但我想在单击mouseout
时触发.edit
。