So machen Sie qtip2 Tooltips dynamisch

Question

Wenn die Seite geladen wird, funktioniert jeder Tooltip einwandfrei, aber wenn die Daten durch Ajax aktualisiert werden, dann hört es einfach auf zu arbeiten, wie kann ich es funktionieren lassen?

$(document).ready(function() { 
    // MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!! 
    $('.userExtend').each(function() { 

     $(this).qtip({ 
      content: { 
       text: function(event, api) { 
        $.ajax({ 
          url: api.elements.target.attr('data-url') // Use href attribute as URL 
         }) 
         .then(function(content) { 
          // Set the tooltip content upon successful retrieval 
          api.set('content.text', content); 
         }, function(xhr, status, error) { 
          // Upon failure... set the tooltip content to error 
          api.set('content.text', status + ': ' + error); 
         }); 

        return 'Loading...'; // Set some initial text 
       } 
      }, 
      position: { 
       viewport: $(window) 
      }, 
      hide: { 
       fixed: true, 
       delay: 300 
      }, 
      style: 'qtip-light' 
     }); 
    }); 
}); 

Nach qtip2 hier ist, wie wir es dynamisch machen http://jsfiddle.net/qTip2/qcwV4/ aber ich bin neu in Jquery & nicht in der Lage, es zu integrieren mit diesem Code

Answer 1

Was die QTIP Geige vorschlägt, ist ein so genanntes delegated event handler. Der Trick besteht darin, einen mouseenter Handler an ein Elternelement anzuhängen, aber das Ereignis an Nachkommen zu delegieren, indem ein Selektor verwendet wird - in der Geige werden alle <a> Tags mit einem title Attribut a[title].

Sie können diesen Ansatz leicht an Ihren eigenen Code anpassen. Sie wollen qTips auf ein beliebiges Element binden, die die Klasse .userExtend hat:

$('body').on('mouseenter', '.userExtend', function() { 
    $(this).qtip({ 
    content: { 
     text: function(event, api) { 
     $.ajax({ 
      url: api.elements.target.attr('data-url') // Use href attribute as URL 
      }) 
      .then(function(content) { 
      // Set the tooltip content upon successful retrieval 
      api.set('content.text', content); 
      }, function(xhr, status, error) { 
      // Upon failure... set the tooltip content to error 
      api.set('content.text', status + ': ' + error); 
      }); 

     return 'Loading...'; // Set some initial text 
     } 
    }, 
    position: { 
     viewport: $(window) 
    }, 
    hide: { 
     fixed: true, 
     delay: 300 
    }, 
    style: 'qtip-light' 
    }); 
}); 

Hinweis das Fehlen eines ready() Handler; es ist nicht notwendig und sollte generally be avoided.