Question

我有工具提示（https://github.com/iamceege/tooltipster），这些工具提示是通过包含用户点击图标的ajax请求生成的。但是，当事件被触发时，我无法让听众工作。在下面的代码中，我从未收到警报弹出窗口。如何在工具提示中获取事件？

以下是我正在初始化工具提示器的方法：

$('.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>

最后，click事件的监听器：

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

Answer 1

您必须在模板位于文档中后创建事件。

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调用之外创建事件，所以它会错过你的工具提示。

工具提示中未捕获的事件

1 个答案: