0

ユーザーがクリックするアイコンを含む ajax リクエストを介して生成されるツールチップ ( 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>

最後に、クリック イベントのリスナー:

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

1 に答える 1

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

あなたのコードでは、非同期ajax呼び出しの外でイベントが作成されているため、いわばツールチップがありません。

于 2014-10-03T05:06:14.707 に答える