FB comment "load 10 more comments" button click call application window resize event not working

Question

I am using "https://developers.facebook.com/docs/plugins/comments/" javascript SDK to load comment in my application. Now my issue is that I am not able to track load more click event inside comment iframe. I need to track functionality to set parent div height as per the comments div height which is loaded after clicking on the load more button event.

Answer 1

I tried with different solutions and found one working sample using the modified code available on "https://jsfiddle.net/vb4xgcmo/".

window.fbAsyncInit = function () {
            FB.Event.subscribe( 'xfbml.render', function ( response ) {
                if ( $( '.fb-comments' ).length > 0 ) {
                    if ( $( '.fb-comments iframe' ).length > 0 ) {
                        iframeClickTracking( $( '.fb-comments iframe' ) );
                    }
                }
            } );
        }
        function iframeClickTracking( elm ) {
            elm.bind( 'mouseover', function () {
                console.log( 'in' );
                onIframeHeightChange( elm, function () {
                    $( '#section_1' ).css( 'height', $( '#fbv' ).height() );
                } );

            } );
            elm.bind( 'mouseout', function () {
                // If they leave the ad, then they aren't going to click. Kill the run event for resize.
                setTimeout( function () {
                    if ( elm.onIframeHeightChange ) {
                        $( '#section_1' ).css( 'height', $( '#fbv' ).height() );
                        clearTimeout( elm.onIframeHeightChange );
                    }
                }, 1000 );
            } );
        }

        function onIframeHeightChange( elm, callback ) {
            var lastHeight = elm.height(), newHeight;
            (function run() {
                newHeight = elm.height();
                if ( lastHeight != newHeight ) {
                    callback();
                }
                lastHeight = newHeight;
                if ( elm.onIframeHeightChange ) {
                    clearTimeout( elm.onIframeHeightChange );
                }
                elm.onIframeHeightChange = setTimeout( run, 1000 );
            })();
        }