Twitter share button (widget) not working with jquery fadeout function in firefox

I'm using firefox 50.1.0 when I add fadeout or fadein jquery functions the twitter share button doesn't show up. The iframe is getting loaded but the button is not showing up. The button works fine in all browsers except FIREFOX. This my fiddle https://jsfiddle.net/trvh8r12/

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

</head>
<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
                <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
            <div class="row">
                    <div class="col-md-12 text-center message-color">
                            <h1>Congrats !!!!!....</h1>
                    </div>
                    <div class="col-md-12 text-align" style="display:block !important;">
                                <div class="gap"></div>

                        <a href="https://twitter.com/share" class="twitter-share-button btn-icon" data-text=" "
                     data-show-count="false"><i class="btn-icon"></i></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                 </div>
            </div>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script>
            $(document).ready(function(){
                    $('#message-id').hide();
                    $('#btn-submit').click(function(){
                            $('#message-id').fadeIn(2000);
                            $('#form-puzzle').fadeOut(2000);
                    });
            });
    </script>
</body>
</html>

Generally, Keep your script references in the Head not the body. You need to include jQuery, Bootstrap css and Bootstrap js correctly to use it. This works by getting the widget script on click and then scanning the dom for the div with the widget code to execute solving the async problem with Firefox.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> Code Integration Close
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Home</title>
</head>

<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
            <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
        <div class="row">
            <div class="col-md-12 text-center message-color">
                <h1>Congrats !!!!!....</h1>
            </div>
            <div class="col-md-12 text-align" style="display:block !important;">
                <div class="gap"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#message-id').hide();
            $('#btn-submit').click(function() {
                $.getScript("https://platform.twitter.com/widgets.js")
                    .done(function() {
                        $('#message-id').show(function() {
                            $('#form-puzzle').fadeOut(2000);
                            twttr.widgets.load(
                                document.getElementById("#message-id")
                            );
                        });
                    })
            });
        });
    </script>

</body>

</html>

来源：https://stackoverflow.com/questions/41447355/twitter-share-button-widget-not-working-with-jquery-fadeout-function-in-firefo

标签

jquery

firefox

twitter-widget