Les info-bulles jquery et ajax ne fonctionnent pas sur le contenu chargé en direct

Question

J'utilise Ruby on Rails et Jquery comme ma bibliothèque et 2 plugins mais cela devrait être une question assez indépendante du plugin. J'utilise le plugin jquery.pageLess qui effectue un appel ajax à la pagination intégrée aux rails afin de charger de nouveaux éléments sur la page lorsque vous faites défiler vers le bas (un peu comme la nouvelle disposition de google images) . Cependant, j'utilise également le plugin ivre pour ajouter des info-bulles à une partie de l'image de la liaison en cours de chargement.

Ces infobulles fonctionnent correctement sur les éléments qui n'ont pas été chargés sans page (qui se trouvaient déjà sur la page initialement chargée) mais n'apparaissent pas sur les éléments qui n'ont pas été chargés en page. Je suppose que pageLess fait une requête en temps réel, en direct, pour mettre à jour la page, mais le plugin astucieux tooltip n'a pas et n'est donc pas chargé sur l'un des nouveaux liens qui sont retournés par pageLess.

Comment faire en sorte que mes fonctions jQuery fonctionnent dans le contexte d'un chargement en direct/d'un contenu ajaxé?

Answer 1

$('selector').tipsy({ 
    live: true 
});

http://onehackoranother.com/projects/jquery/tipsy/

Soutien aux événements en direct
Les événements en direct sont pris en charge en utilisant l'option {live: true}. jQuery ≥ 1.4.1 est requis et les info-bulles en direct ne supportent pas le déclenchement manuel.

Modifier
Une autre façon serait de lier éméchés aux nouveaux éléments après qu'ils ont été créés. Exemple:

$('selector').tipsy(); 

// post, get, ajax, etc 
$.post(..., function(data) { 
    // in the return function, first create the new elements 
    ... 

    // call on the tipsy method again 
    // the selector will now also match the newly created elements 
    $('selector').tipsy(); 
});

Si vous méthode tipsy a beaucoup de variables et vous ne voulez pas de le répéter, il pourrait être plus facile de créer une fonction distincte. Exemple:

// create the function 
function setupTipsy() { 
    $('selector').tipsy({ 
    html: true, 
    gravity: 'w', 
    etc.. 
    }); 
} 

// call on the function when the document has been loaded 
setupTipsy(); 

// post, get, ajax, etc 
$.post(..., function(data) { 
    // in the return function, first create the new elements 
    ... 

    // call on the same function again 
    setupTipsy(); 
});