ajax调用后工具提示停止工作

时间:2012-04-03 20:55:39

标签: jquery jsf primefaces

我正在使用这个jQuery片段在html表中的某些JSF primefaces元素上创建工具提示。

$(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');
    });
});

这很好用,除非你通过jsf ajax magic修改/添加/删除表中的一行,工具提示就会停止工作。

如何在修改/添加/删除表格中的行后保持工具提示有效?

我认为我应该使用jquery的实时功能来保持工具提示的正常工作,但我不确定在这种情况下我会如何使用它们。

enter image description here

4 个答案:

答案 0 :(得分:6)

修改表格行时,很可能会丢失处理程序(通过jsf ajax magic)。尝试使用下面的.on,让我们知道结果,

注意:以下是jQuery 1.7版。如果您使用旧版本的jQuery,请使用.live or .delegate

$(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');
    });
});

答案 1 :(得分:1)

在完成ajax调用(更改DOM)后,是否在其中一个应该在悬停时显示工具提示的类中添加/删除元素?

默认情况下,Eventlisteners绑定到DOM中的元素。你确实应该使用直播,甚至更好:委托。

我将发布一个将eventlistener绑定到body的答案,但是如果你有一个更深层次的嵌套包装元素,它将包含应该有工具提示的子元素,那么你应该将eventlistener绑定到这一点。

$("body").delegate('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash', 'click', function(event){
// Just do the things you would do in a normal .hover-event that is binded to these classes
});

答案 2 :(得分:0)

警告:我不懂JSF

您需要将mousemove事件重新绑定到已加载的内容。

JSF可能会提供回调来实现这一目标。此链接看起来很有希望:http://javaserverfaces.java.net/nonav/docs/2.0/jsdocs/symbols/jsf.ajax.html#.addOnEvent

显然,Primefaces有一个不完整的属性用于此目的:

 <p:commandButton value="Cancel" actionListener="#{progressBean.cancel}" oncomplete="pbAjax.cancel();startButton2.enable();" /> 

也许这对你有帮助吗?

答案 3 :(得分:0)

悬停事件未绑定到ajax调用添加的新元素。 您必须手动将悬停功能添加到新添加的元素中。

我并不是真的提倡它,但是当你在每次ajax调用之后运行上面发布的代码时,它可能会起作用。请注意,您可能会在某些元素上绑定事件两次,这有时会产生一些奇怪的错误。