我有一个响应处理程序,用于替换ajax响应中的内容。我想在更换内容后触发事件。这是响应处理程序:
function(response)
{
/* animate to top if called from bottom pagination */
if ( caller === 'pag-bottom' && jq('#subnav').length ) {
var top = jq('#subnav').parent();
jq('html,body').animate({scrollTop: top.offset().top}, 'slow', function() {
jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq(this).fadeIn(100);
});
});
} else {
jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq(this).fadeIn(100);
});
}
jq('.item-list-tabs li.selected').removeClass('loading');
// the event I want to trigger
jq( document ).trigger( "buddyFilter:replaced", [ object, filter] );
}
我的问题是此事件会提前触发,因此触发事件的代码无法正确计算div的大小且格式不正确。
我尝试过尝试链接事件触发器的各种组合,但我无法做到正确。我不能使用手动延迟,因为那样会导致视觉跳跃,如果加载时间比时间慢,则不会总是有效。
如何在html()值呈现时触发此事件?
编辑:
这是与我的代码类似的jsfiddle,但我不得不改变它以便在小提琴中工作。它显示在事件触发后,div为0高度
答案 0 :(得分:2)
尝试使用.promise()
,.then()
function success(response)
{
/* animate to top if called from bottom pagination */
if ( caller === 'pag-bottom' && jq('#subnav').length ) {
var top = jq('#subnav').parent();
return jq('html,body').animate({scrollTop: top.offset().top}, 'slow', function() {
jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq(this).fadeIn(100);
jq('.item-list-tabs li.selected').removeClass('loading');
});
}).promise();
} else {
return jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq(this).fadeIn(100);
jq('.item-list-tabs li.selected').removeClass('loading');
}).promise();
}
};
$.ajax().then(success).then(function() {
// the event I want to trigger
jq( document ).trigger( "buddyFilter:replaced", [ object, filter] );
}]);
答案 1 :(得分:1)
您过早地触发了此事件。试试这个:
jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq(this).fadeIn(100, function() {
//trigger the event herer
});
});
当然,你必须在两个地方做到这一点。
答案 2 :(得分:0)
您只需在实际的HTML替换发生后立即触发事件:
jq(target).fadeOut( 100, function() {
jq(this).html(response);
jq( document ).trigger( "buddyFilter:replaced", [ object, filter] );
jq(this).fadeIn(100);
});
另请注意,您重复完全相同的代码两次,以便通过将其包装在方法中来更好地干掉它。