2014-10-03 4 views
0

사용자가 클릭 할 수있는 아이콘이 포함 된 아약스 요청을 통해 생성 된 툴팁 (https://github.com/iamceege/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> 
다음

내가 tooltipster를 초기화하고있어 어떻게

그리고 마지막으로 클릭 이벤트에 대한 리스너 :

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

나는 tooltipster의 소스를보고있었습니다. 와우, 콘텐츠로 상자를 표시하는 데 많은 오버 헤드가 발생합니다. 왜 jquery.load를 사용하지 않습니까? –

답변

0

템플릿을 만든 후에 이벤트를 만들어야합니다 먹었어요. 코드는 이벤트가 그렇게 말하는 당신의 툴팁이 골대를 벗어났습니다 있도록 비동기 아약스 호출 외부에서 작성되고있는 방법으로

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!'); 
    }); 
}); 

.

+0

나는 질문을 게시하기 전에 이것을 실제로 시도했다. 불운. – chaoskreator

+0

위임 대신 on 메서드를 사용해 보셨습니까? $ ('. row')와 같습니다. on ('click', 'button.icon', function() {}) –

관련 문제