3

我正在使用这个 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 魔术修改/添加/删除表中的一行，工具提示将停止工作。

修改/添加/删除表格中的一行后，如何保持工具提示正常工作？

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

在此处输入图像描述

4

4 回答 4

6

当您修改表格行（通过 jsf ajax 魔术）时，处理程序很可能会丢失。尝试.on像下面这样使用，让我们知道结果，

注意：以下是 jQuery 版本 1.7。.live or .delegate如果您使用旧版本的 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');
    });
});
于 2012-04-03T21:01:35.553 回答
1

在完成 ajax 调用（更改 DOM）后，您是否使用应该在悬停时显示工具提示的类之一添加/删除元素？

事件监听器默认绑定到当时 DOM 中的元素。你确实应该使用 live，甚至更好：delegate。

我将发布一个将事件监听器绑定到正文的答案，但如果你有一个更深的嵌套包装元素，它将包含所有应该有工具提示的子元素，那么你应该将事件监听器绑定到那个。

$("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
});
于 2012-04-03T21:01:33.910 回答
0

警告：我不知道 JSF

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

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

显然 Primefaces 为此目的具有 oncomplete 属性：

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

也许这会对你有所帮助？

于 2012-04-03T21:00:30.070 回答
0

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

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

于 2012-04-03T21:02:09.563 回答