在html()设置后触发自定义事件

时间:2015-06-18 00:53:01

标签: javascript jquery

我有一个响应处理程序,用于替换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高度

http://jsfiddle.net/jq7n4kfL/1/

3 个答案:

答案 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);
});

另请注意,您重复完全相同的代码两次,以便通过将其包装在方法中来更好地干掉它。