3

この jQuery スニペットを使用して、HTML テーブル内のいくつかの JSF プライムフェイス要素にツールチップを作成しています。

$(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 用です。古いバージョンの 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');
    });
});
于 2012-04-03T21:01:35.553 に答える
1

ajax 呼び出し (DOM の変更) を行った後、ホバー時にツールチップを表示するクラスの 1 つで要素を追加/削除していますか?

イベントリスナーはデフォルトで、その時点で DOM にある要素にバインドされています。あなたは確かにライブを使用する必要があります.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 呼び出しの後に上に投稿したコードを実行すると、おそらくうまくいくでしょう。おそらくいくつかの要素でイベントを 2 回バインドしている可能性があることに注意してください。これにより、奇妙なバグが発生することがあります。

于 2012-04-03T21:02:09.563 に答える