2

我正在使用带有视图的drupal 7，并且我正在使用我找到的向上/向下文本幻灯片的jquery脚本。它有效，但是当我尝试将它与带有 ajax 的视图暴露过滤器一起使用时，它似乎不起作用。

我在网上发现 jquery 脚本必须使用 live 或 bind 或委托，但我无法弄清楚。下面是我使用的脚本：

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");
        });
    });
}

非常感谢

4

2 回答 2

0

我建议将您的插件附加到不会通过 ajax 替换的元素。并且，使用 on() 允许您在附加的事件处理程序中指定一个目标。

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");
    });
}​

或者，在 ajax 成功时重新调用您的插件。

jQuery.ajax(options).done(function() {
    jQuery('.feature_box').showFeatureText();
});
于 2012-09-02T02:40:41.117 回答
0

转换box.hover成.live函数，如果可能的话，直接使用带有类/ID名称的实时函数，

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

或者

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

box.live("mouseout", function(){
    // mouseout js code
});
于 2012-09-01T19:09:19.740 回答