0

I have tooltips (https://github.com/iamceege/tooltipster) that are generated via ajax requests that contain icons for the user to click. However, I cannot get the listeners to work when the event is fired. In the code below, I never get the alert popup. How can I get the events inside a tooltip?

Here is how I'm initializing 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');
            });
        }
    }
});

And this is the content that gets updated to the tooltip after the being parsed by 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>

And, lastly, the listener for the click event:

$(document).delegate('button.icon', 'click', function(){
    alert('icon!');
});
chaoskreator
  • 889
  • 1
  • 17
  • 39
  • I was just looking at the source of tooltipster. Wow that's a lot of overhead for having a box appear with content. Why aren't you using jquery.load? – Quentin Engles Oct 04 '14 at 05:14

1 Answers1

0

You have to create the event after the template is in the document.

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

With your code the way it is the event is being created outside the asynchronous ajax call so it misses your tooltip so to speak.

Quentin Engles
  • 2,744
  • 1
  • 20
  • 33