사용자가 클릭 할 수있는 아이콘이 포함 된 아약스 요청을 통해 생성 된 툴팁 (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!');
});
나는 tooltipster의 소스를보고있었습니다. 와우, 콘텐츠로 상자를 표시하는 데 많은 오버 헤드가 발생합니다. 왜 jquery.load를 사용하지 않습니까? –