Tooltips stop working after an ajax call

jquery, jsf, primefaces

Solution

Most likely the handlers are lost when you modify the table row (via jsf ajax magic). Try using `.on` like below and let us know the results,

Note: Below is for jQuery version 1.7. Use `.live or .delegate` if you using older version of jQuery.

$(document).ready(function() {

    $(document).on('mouseenter', '.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash', function(e) {    // this is the hover in function 

        // Since the elements have multiple classes, this function gets the one that starts with ui-icon-<something>
        var icon = $(this).attr('class').match(/ui-icon-(?:pencil|check|close|trash)/)[0];
        var title = null;

        if(icon == 'ui-icon-pencil') {
            title = 'Edit';
        } else if(icon == 'ui-icon-check') {
            title = 'Save';
        } else if(icon == 'ui-icon-close') {
            title = 'Cancel';
        } else if(icon == 'ui-icon-trash') {
            title = 'Delete';
        }

        $('body').append('<p class="tooltip">'+title+'</p>');
        $('.tooltip').css('top', (e.pageY-50) + 'px').css('left', (e.pageX-10) + 'px').fadeIn('fast');
    });

    $(document).on('mouseleave', '.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash', function() { // this is the hover out function
        $('.tooltip').remove();
    });

    // this handles the tooltip moving when the mouse moves
    $(document).on('mousemove', '.ui-icon-pencil', function(e) {
        $('.tooltip').css('top', (e.pageY-50) + 'px').css('left', (e.pageX-10) + 'px');
    });
});

Problem

I'm using this jQuery snippet to create tooltips on some JSF primefaces elements in an html table. ``` $(document).ready(function() { $('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) { // this is the hover in function // Since the elements have multiple classes, this function gets the one that starts with ui-icon-<something> var icon = $(this).attr('class').match(/ui-icon-(?:pencil|check|close|trash)/)[0]; var title = null; if(icon == 'ui-icon-pencil') { title = 'Edit'; } else if(icon == 'ui-icon-check') { title = 'Save'; } else if(icon == 'ui-icon-close') { title = 'Cancel'; } else if(icon == 'ui-icon-trash') { title = 'Delete'; } $('body').append('<p class="tooltip">'+title+'</p>'); $('.tooltip').css('top', (e.pageY-50) + 'px').css('left', (e.pageX-10) + 'px').fadeIn('fast'); }, function() { // this is the hover out function $('.tooltip').remove(); }); // this handles the tooltip moving when the mouse moves $('.ui-icon-pencil').mousemove(function(e) { $('.tooltip').css('top', (e.pageY-50) + 'px').css('left', (e.pageX-10) + 'px'); }); }); ``` This works great except that if you either modify/add/delete a row in the table via jsf ajax magic, the tooltips stop working. How can i keep the tooltips working after modifying/adding/deleting a row in the table? I'm think i should be using jquery's live function to keep the tooltips working, but i'm not sure how i would use them in this circumstance.

Original source