设置html（）后触发自定义事件

Question

I have a response handler that replaces content from ajax response. I want to fire an event after the content is replaced. This is the response handler:

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

My problem is this event fires to early so my code that fires on event doesn't calculate the size of the div correctly and formatting is incorrect.

I have tried various combinations of trying to chain the event trigger but I can't get it right. I can't use a manual delay because then that will cause visual jump and not always work if loading time is slower than time.

How can I trigger this event the moment the html() value has rendered?

Edit:

Here is jsfiddle that is similar to my code but I had to change it about to get to work in fiddle. It shows that right after the event fires the div is 0 height

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

Answer 1

Try utilizing .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] );
}]);

Answer 2

You're triggering the event too early. Try this:

            jq(target).fadeOut( 100, function() {
                jq(this).html(response);
                jq(this).fadeIn(100, function() {
                   //trigger the event herer
                });
            });

Of course, you have to do it in two places.

Answer 3

You just put the event firing right after the actual HTML replacement takes place:

jq(target).fadeOut( 100, function() {
    jq(this).html(response);
    jq( document ).trigger( "buddyFilter:replaced", [ object, filter] );
    jq(this).fadeIn(100);
});

Also note that you repeat exactly the same code twice so better DRY it by wrapping it in a method.