conflit entre le curseur haut/bas de jquery et l'ajax

Question

J'utilise drupal 7 avec views et j'utilise un jquery script pour le glissement de texte haut/bas que j'ai trouvé. Cela a fonctionné mais quand j'ai essayé de l'utiliser avec des vues exposées filtres avec ajax il ne semble pas fonctionner.

J'ai trouvé sur le net que jquery script doit utiliser live ou bind ou delegate mais je n'arrive pas à comprendre. Voici le script que j'utilise :

jQuery(function() {
    jQuery('.feature_box').showFeatureText();
});

jQuery.fn.showFeatureText = function() {
    return this.each(function() {
        var box = jQuery(this);
        var text = jQuery('p', this);
        text.css({
            position: 'absolute',
            bottom: '0%'
        }).hide();
        box.hover(function() {
            text.slideDown("fast");
        }, function() {
            text.slideUp("fast");
        });
    });
}

Merci beaucoup.

Answer 1

Convertir box.hover en .live et si possible, utilisez directement la fonction live avec le nom de la classe ou de l'identifiant,

jQuery(".class").hover(/* hover js code */);

OU

box.live("mouseover", function(){
    // mouseover js code
});

box.live("mouseout", function(){
    // mouseout js code
});

Answer 2

Je recommande d'attacher votre plugin à un élément qui ne sera pas remplacé par ajax. Et d'utiliser on() qui vous permet de spécifier une cible dans votre gestionnaire d'événement attaché.

jQuery(function() {
    jQuery('.element_containing_feature_box').showFeatureText();
});

jQuery.fn.showFeatureText = function() {

    return this.on('mouseenter', '.feature_box', function(e){
        $(this).find('p').css({
            position: 'absolute',
            bottom: '0%'
        }).hide();
    }).on('mouseleave', '.feature_box', function(e){
        $(this).find('p').slideUp("fast");
    });
}

Ou, en rappelant votre plugin en cas de succès d'ajax.

jQuery.ajax(options).done(function() {
    jQuery('.feature_box').showFeatureText();
});