Question

我正在使用带有视图的drupal 7，我正在使用jquery脚本来查找上下文本幻灯片。它工作，但当我尝试使用它与视图暴露过滤器与ajax它似乎不起作用。

我在网上发现jquery脚本必须使用live或bind或delegate但我无法弄明白。以下是我使用的脚本：

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

非常感谢

Answer 1

将box.hover转换为.live函数，如果可能，则直接使用带有class / id名称的live函数，

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

OR

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

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

Answer 2

我建议将插件附加到不会通过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();
});

jquery up / down滑块与ajax冲突

2 个答案: