工具提示在ajax調用後停止工作

我正在使用此jQuery代碼片段在HTML表格中的某些JSF primefaces元素上創建工具提示。工具提示在ajax調用後停止工作

$(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的實時功能來保持工具提示工作，但我不知道我會如何在這種情況下使用它們。

enter image description here

來源

2012-04-03 Catfish

當修改表格行（通過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'); 
    }); 
});

來源

2012-04-03 21:01:35

假設他使用1.7+，這將是我的猜測。 – 2012-04-03 21:03:07

@MatthewBlancarte真，增加註意提及它是用於jQuery 1.7的。謝謝！ – 2012-04-03 21:05:44

自PrimeFaces 3.2以來，包含jQuery 1.7.x。所以如果OP使用3.2或更新版本，他/她應該全部設置。 – BalusC 2012-04-03 21:10:58

警告：我不知道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-03 21:00:30

是否在添加/刪除元素時，在完成ajax-call（更改DOM）之後，應該在懸停時顯示工具提示？

Eventlisteners默認綁定到當時DOM中的元素。你確實應該使用現場，甚至更好：代表。

我會發佈一個將eventlistener綁定到body的答案，但是如果你有，例如一個更深的嵌套wrapper-element將包含al應該有tooltip的子元素，那麼你應該綁定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 
});

來源

2012-04-03 21:01:33

懸停事件未綁定到由ajax調用添加的新元素。您必須手動將懸停功能添加到這些新添加的元素。

我並不真的主張它，但是當你在每次ajax調用後運行上面發佈的代碼時，它可能會工作。請注意，您可能會將事件綁定到某些元素上，這有時會產生一些奇怪的錯誤。

來源

2012-04-03 21:02:09

工具提示在ajax調用後停止工作

回答

相關問題