本文介绍了Tooltipster不适用于生成的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已在上安装了Tooltipster，但它不适用于动态添加的内容。
I have installed Tooltipster on my website, but it does not work for content added dynamically.
当我选择最新的第一个，最受欢迎的等排序时，您可以在按您的选择排序的游戏（默认最新游戏）框中看到它...生成内容时，Tooltipster不会看到该内容。不知怎的，我必须告诉Tooltipster这个内容。
You can see it in the "SORT GAMES BY YOUR CHOICE (NEWEST GAMES BY DEFAULT)" box, when I select sort by "newest first", "most popular," etc... when the content is generated, Tooltipster does not see that content. Somehow I must tell Tooltipster about that content.
这是Tooltipster代码：
Here is the Tooltipster code:
<head></head>
<link rel="stylesheet" type="text/css" href="http://www.heroplaysonline.com/css/tooltipster.css" />
<script type="text/javascript" src="http://www.heroplaysonline.com/js/jquery.tooltipster.min.js"></script>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
position: 'bottom-left',
contentAsHTML: 'true',
animation: 'grow',
theme: '.my-custom-theme'
});
});
</script>
以下是生成内容的脚本：
Here is the script which generates the content:
jQuery(document).ready(function($){
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = Math.ceil((ph-ah) / 2);
$(this).css('margin-top', mh);
});
};
$('#sortable-game-box-order select').change(function() {
var sorturl = $(this).attr("value");
var loaderheight = $('#sortable-game-box-inner-content').height();
$('#sortable-game-box-loader').css('height', loaderheight+13);
$('#sortable-game-box-loader-content').css('height', loaderheight+13);
$('#sortable-game-box-loader-content img').vAlign();
$('#sortable-game-box-list').hide();
$('#sortable-game-box-loader').show();
$('#sortable-game-box-inner').load(sorturl + ' #sortable-game-box-inner-content', function() {
$('#sortable-game-box-loader').hide();
$('#sortable-game-box-list').show();
});
});
});
这是js的代码，其中内容是动态生成的，tooltipster可以工作，但我无法转换它是我的。
Here is the code of js, where content is generated dynamically and tooltipster works, but I could not transform it for mine.
(function($){'use strict';Date.now=Date.now||function(){return+new Date();};$.ias=function(options)
{var opts=$.extend({},$.ias.defaults,options);var util=new $.ias.util();var paging=new $.ias.paging(opts.scrollContainer);var hist=(opts.history?new $.ias.history():false);var _self=this;function call_tooltip()
{$('.tooltip_cls').tooltipster({animation:'grow',theme:'.my-custom-theme'});}
function init()
{call_tooltip();var pageNum;paging.onChangePage(function(pageNum,scrollOffset,pageUrl){if(hist){hist.setPage(pageNum,pageUrl);}
opts.onPageChange.call(this,pageNum,pageUrl,scrollOffset);});reset();if(hist&&hist.havePage()){stop_scroll();pageNum=hist.getPage();util.forceScrollTop(function(){var curTreshold;if(pageNum>1){paginateToPage(pageNum);curTreshold=get_scroll_treshold(true);$('html, body').scrollTop(curTreshold);}
else{reset();}});}
return _self;}
init();function reset()
{hide_pagination();opts.scrollContainer.scroll(scroll_handler);call_tooltip();}
function scroll_handler()
{var curScrOffset,scrTreshold;curScrOffset=util.getCurrentScrollOffset(opts.scrollContainer);scrTreshold=get_scroll_treshold();if(curScrOffset>=scrTreshold){if(get_current_page()>=opts.triggerPageTreshold){stop_scroll();show_trigger(function(){paginate(curScrOffset);});}
else{paginate(curScrOffset);}}}
function stop_scroll()
{opts.scrollContainer.unbind('scroll',scroll_handler);}
function hide_pagination()
{$(opts.pagination).hide();}
function get_scroll_treshold(pure)
{var el,treshold;el=$(opts.container).find(opts.item).last();if(el.size()===0){return 0;}
treshold=el.offset().top+ el.height();if(!pure){treshold+=opts.tresholdMargin;}
return treshold;}
function paginate(curScrOffset,onCompleteHandler)
{var urlNextPage;urlNextPage=$(opts.next).attr('href');if(!urlNextPage){if(opts.noneleft){$(opts.container).find(opts.item).last().after(opts.noneleft);}
return stop_scroll();}
if(opts.beforePageChange&&$.isFunction(opts.beforePageChange)){if(opts.beforePageChange(curScrOffset,urlNextPage)===false){return;}}
paging.pushPages(curScrOffset,urlNextPage);stop_scroll();show_loader();loadItems(urlNextPage,function(data,items){var result=opts.onLoadItems.call(this,items),curLastItem;if(result!==false){$(items).hide();curLastItem=$(opts.container).find(opts.item).last();curLastItem.after(items);$(items).fadeIn();}
urlNextPage=$(opts.next,data).attr('href');$(opts.pagination).replaceWith($(opts.pagination,data));remove_loader();hide_pagination();if(urlNextPage){reset();}
else{stop_scroll();}
opts.onRenderComplete.call(this,items);if(onCompleteHandler){onCompleteHandler.call(this);}});}
function loadItems(url,onCompleteHandler,delay)
{var items=[],container,startTime=Date.now(),diffTime,self;delay=delay||opts.loaderDelay;$.get(url,null,function(data){container=$(opts.container,data).eq(0);if(0===container.length){container=$(data).filter(opts.container).eq(0);}
if(container){container.find(opts.item).each(function(){items.push(this);});}
if(onCompleteHandler){self=this;diffTime=Date.now()- startTime;if(diffTime<delay){setTimeout(function(){onCompleteHandler.call(self,data,items);},delay- diffTime);}else{onCompleteHandler.call(self,data,items);}}},'html');}
function paginateToPage(pageNum)
{var curTreshold=get_scroll_treshold(true);if(curTreshold>0){paginate(curTreshold,function(){stop_scroll();if((paging.getCurPageNum(curTreshold)+ 1)<pageNum){paginateToPage(pageNum);$('html,body').animate({'scrollTop':curTreshold},400,'swing');}
else{$('html,body').animate({'scrollTop':curTreshold},1000,'swing');reset();}});}}
function get_current_page()
{var curScrOffset=util.getCurrentScrollOffset(opts.scrollContainer);return paging.getCurPageNum(curScrOffset);}
function get_loader()
{var loader=$('.ias_loader');if(loader.size()===0){loader=$('<div class="ias_loader">'+ opts.loader+'</div>');loader.hide();}
return loader;}
function show_loader()
{var loader=get_loader(),el;if(opts.customLoaderProc!==false){opts.customLoaderProc(loader);}else{el=$(opts.container).find(opts.item).last();el.after(loader);loader.fadeIn();}}
function remove_loader()
{var loader=get_loader();loader.remove();}
function get_trigger(callback)
{var trigger=$('.ias_trigger');if(trigger.size()===0){trigger=$('<div class="ias_trigger"><a href="all.html">'+ opts.trigger+'</a></div>');trigger.hide();}
return trigger;}
function show_trigger(callback)
{var trigger=get_trigger(callback),el;el=$(opts.container).find(opts.item).last();el.after(trigger);trigger.fadeIn();}
function remove_trigger()
{var trigger=get_trigger();trigger.remove();}};$.ias.defaults={container:'#container',scrollContainer:$(window),item:'.item',pagination:'#pagination',next:'.next',noneleft:false,loader:'<img src="images/loader.gif"/>',loaderDelay:600,triggerPageTreshold:4,trigger:'Load more items',tresholdMargin:0,history:true,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:false};$.ias.util=function()
{var wndIsLoaded=false;var forceScrollTopIsCompleted=false;var self=this;function init()
{$(window).load(function(){wndIsLoaded=true;});}
init();this.forceScrollTop=function(onCompleteHandler)
{$('html,body').scrollTop(0);if(!forceScrollTopIsCompleted){if(!wndIsLoaded){setTimeout(function(){self.forceScrollTop(onCompleteHandler);},1);}else{onCompleteHandler.call();forceScrollTopIsCompleted=true;}}};this.getCurrentScrollOffset=function(container)
{var scrTop,wndHeight;if(container.get(0)===window){scrTop=container.scrollTop();}else{scrTop=container.offset().top;}
wndHeight=container.height();return scrTop+ wndHeight;};};$.ias.paging=function()
{var pagebreaks=[[0,document.location.toString()]];var changePageHandler=function(){};var lastPageNum=1;var util=new $.ias.util();function init()
{$(window).scroll(scroll_handler);}
init();function scroll_handler()
{var curScrOffset,curPageNum,curPagebreak,scrOffset,urlPage;curScrOffset=util.getCurrentScrollOffset($(window));curPageNum=getCurPageNum(curScrOffset);curPagebreak=getCurPagebreak(curScrOffset);if(lastPageNum!==curPageNum){scrOffset=curPagebreak[0];urlPage=curPagebreak[1];changePageHandler.call({},curPageNum,scrOffset,urlPage);}
lastPageNum=curPageNum;}
function getCurPageNum(scrollOffset)
{for(var i=(pagebreaks.length- 1);i>0;i--){if(scrollOffset>pagebreaks[i][0]){return i+ 1;}}
return 1;}
this.getCurPageNum=function(scrollOffset)
{scrollOffset=scrollOffset||util.getCurrentScrollOffset($(window));return getCurPageNum(scrollOffset);};function getCurPagebreak(scrollOffset)
{for(var i=(pagebreaks.length- 1);i>=0;i--){if(scrollOffset>pagebreaks[i][0]){return pagebreaks[i];}}
return null;}
this.onChangePage=function(fn)
{changePageHandler=fn;};this.pushPages=function(scrollOffset,urlNextPage)
{pagebreaks.push([scrollOffset,urlNextPage]);};};$.ias.history=function()
{var isPushed=false;var isHtml5=false;function init()
{isHtml5=!!(window.history&&history.pushState&&history.replaceState);isHtml5=false;}
init();this.setPage=function(pageNum,pageUrl)
{this.updateState({page:pageNum},'',pageUrl);};this.havePage=function()
{return(this.getState()!==false);};this.getPage=function()
{var stateObj;if(this.havePage()){stateObj=this.getState();return stateObj.page;}
return 1;};this.getState=function()
{var haveState,stateObj,pageNum;if(isHtml5){stateObj=history.state;if(stateObj&&stateObj.ias){return stateObj.ias;}}
else{}
return false;};this.updateState=function(stateObj,title,url)
{if(isPushed){this.replaceState(stateObj,title,url);}
else{this.pushState(stateObj,title,url);}};this.pushState=function(stateObj,title,url)
{var hash;if(isHtml5){history.pushState({ias:stateObj},title,url);}
else{}
isPushed=true;};this.replaceState=function(stateObj,title,url)
{if(isHtml5){history.replaceState({ias:stateObj},title,url);}
else{this.pushState(stateObj,title,url);}};};})(jQuery);
我已经为此工作了两天，但无法修复它，因为我什么都不知道编码。我只能试验，删除一些代码等，但我认为解决方案超出了这个范围。
I have been working on this for two days, but could not fix it, because I know nothing in coding. I could only experiment, remove some code etc, but I think that the solution is beyond that.
任何帮助都将受到赞赏。
Any help will be appreciated.
推荐答案
danemacmillan ，你是对的。
我添加了以下代码，现在tooltipster也适用于动态生成的内容。
danemacmillan, you were right.I have added the following code and now tooltipster works on dynamically generated content too.
<script type="text/javascript">
$('body').on('mouseover mouseenter', '.tooltip', function(){
$(this).tooltipster({
contentAsHTML: 'true',
animation: 'grow',
theme: '.my-custom-theme',
position: 'top-left'
});
$(this).tooltipster('show');
});
</script>
我仍然不相信它，但它确实有效！ ：D
I still don't believe in it, but it really works in fact! :D
这篇关于Tooltipster不适用于生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！