Question

I have a span in my page once. I have used hover function to display a pop-up on mouse hover and hide that pop-up automatically once the mouse is moved away. My code is below and it works fine.

What i need is if i click on the span the pop-up should freeze and only if i close the pop-up it must close. But the hover should also work. I need both hover and click function to be worked simultaneously..

My code for hover:

$('td#' + parentElement).find('span.likes').hover(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
}, function () {
    $('div#pop-up').hide();
});

My code for click:

$('#' + parentElement).find('span.likes').click(function (e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;
    if (leftPos < 0) {
        leftPos = 10;
    }
    GetLikesList(json_row.value.task_id);
    $('div#pop-up').show().css('top', topPos).css('left', leftPos).appendTo('body');
    $('#mopopuptitle').html('People who liked this Request');
    e.stopPropagation();
})

How to integrate both???

Answer 1

You can use .on() to bind multiple events:

$('#' + parentElement).find('span.likes').on('mouseenter click', function(e) {
    topPos = e.pageY - ($('div#pop-up').height()) - 35;
    leftPos = e.pageX - ($('div#pop-up').width()) - 30;

    if (leftPos < 0) {
        leftPos = 10;
    }

    GetLikesList(json_row.value.task_id);

    $('div#pop-up').show().css({
        top: topPos,
        left: leftPos
    }).appendTo('body');

    $('#mopopuptitle').html('People who liked this Request');
}).on('mouseleave', function () {
    $('div#pop-up').hide();
});

Although I don’t see much use in binding both unless you want to run the handler twice. To click on the element, the mouse has to hover over it.