2014-10-03 48 views
0

我有通過ajax請求生成的工具提示(https://github.com/iamceege/tooltipster),這些請求包含供用戶單擊的圖標。但是,當事件被解僱時,我無法讓聽衆工作。在下面的代碼中,我從來沒有得到警報彈出窗口。如何獲取工具提示中的事件?未在工具提示中捕獲的事件

這裏是我如何初始化tooltipster:

$('.share').tooltipster({ 
    content: 'Loading...', 
    contentAsHTML: true, 
    interactive: true, 
    position: 'bottom', 
    trigger: 'click', 
    functionBefore: function(origin, continueTooltip){ 
     continueTooltip(); 
     if(origin.data('ajax') !== 'cached'){ 
      var id = $(this).attr('id'), 
       datas = id.split('-'), 
       type = $(this).attr('data-type'); 

      if(type != 'pack' && type != 'life'){ 
       type = 'event'; 
      } 

      var shareType = $(this).attr('data-share-type'), 
       q = 'id='+datas[1]+'&t='+type+'&st='+shareType; 

      Site.Funcs.ajaxCall('social', q, function(data){ 
       var html = Site.Funcs.templateCall(data); 
       origin.tooltipster('content', html).data('ajax', 'cached'); 
       origin.tooltipster('show'); 
      }); 
     } 
    } 
}); 

這是得到由Site.Funcs.templateCall()將被解析後更新爲提示內容:

<div class="row"> 
    <div class="large-12 columns"> 
     <button id="facebook" class="zocial icon facebook" data-share-type="question" data-type="event" data-id="1"></button> 
     <button id="twitter" class="zocial icon twitter" data-share-type="question" data-type="event" data-id="1"></button> 
     <button id="google" class="zocial icon google" data-share-type="question" data-type="event" data-id="1"></button> 
     <button id="instagram" class="zocial icon instagram" data-share-type="question" data-type="event" data-id="1"></button> 
    </div> 
</div> 

最後,點擊事件的收聽者:

$(document).delegate('button.icon', 'click', function(){ 
    alert('icon!'); 
}); 
+0

我只是看着tooltipster的來源。哇,這是一個盒子與內容一起出現的很多開銷。你爲什麼不使用jquery.load? – 2014-10-04 05:14:57

回答

0

您必須在templ之後創建事件吃在文件中。

Site.Funcs.ajaxCall('social', q, function(data){ 
    var html = Site.Funcs.templateCall(data); 
    origin.tooltipster('content', html).data('ajax', 'cached'); 
    origin.tooltipster('show'); 
    $(document).delegate('button.icon', 'click', function(){ 
     alert('icon!'); 
    }); 
}); 

與您的代碼是被異步Ajax調用,因此錯過你的提示可以這麼說外面創建事件的方式。

+0

我實際上在發佈問題之前嘗試過。沒有運氣。 – chaoskreator 2014-10-04 03:41:39

+0

您是否嘗試過使用on方法而不是委託?像'('。row')。on('click','button.icon',function(){}) – 2014-10-04 04:47:52