아약스와 jquery 위/아래 슬라이더 충돌

Question

나는 drupal 7보기를 사용하고 내가 찾은 위/아래 텍스트 슬라이드 jquery 스크립트를 사용하고 있습니다. 그것은 효과가 있지만 아약스와 함께 노출 된 필터를 사용하려고 할 때 작동하지 않습니다.

그물에서 jquery 스크립트가 라이브 또는 바인드 또는 위임을 사용해야한다는 것을 알았지 만 알아낼 수 없습니다. 다음은 내가 사용하는 스크립트입니다,

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

.live 기능에 box.hover 변환 대단히 감사합니다, 가능하면 다음 클래스/ID 이름과 직접 라이브 기능을 사용

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

또는

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

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

Answer 2

w 플러그인은 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"); 
    }); 
}​ 

또는 아약스 성공시 플러그인을 다시 호출하십시오.

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