Twitter 공유 버튼 (위젯)이 firefox에서 jquery fadeout 함수와 작동하지 않습니다.

twitter 공유 버튼이 나타나지 않는 fadeout 또는 fadein jquery 기능을 추가 할 때 firefox 50.1.0을 사용하고 있습니다. iframe이로드되고 있지만 버튼이 표시되지 않습니다. 버튼은 FIREFOX를 제외한 모든 브라우저에서 정상적으로 작동합니다. 이 내 바이올린은 https://jsfiddle.net/trvh8r12/Twitter 공유 버튼 (위젯)이 firefox에서 jquery fadeout 함수와 작동하지 않습니다.

<!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>

출처

2017-01-03 Manoj Kadolkar

일반적으로 머리에 스크립트 참조를 유지하지 몸. 그것을 사용하려면 jQuery, Bootstrap css 및 Bootstrap j를 올바르게 포함해야합니다. 이것은 클릭 할 때 위젯 스크립트를 가져온 다음 Firefox에서 비동기 문제를 해결하기 위해 위젯 코드로 div를 검색하여 작동합니다.

<!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>

출처

2017-01-03 16:13:07

당신은 당신이 제공 한 코드가 문제를 해결 WHT을 확장 할 수? – Tom

@thebluefox 님이 방금 –

을 편집하셨습니다. –

Twitter 공유 버튼 (위젯)이 firefox에서 jquery fadeout 함수와 작동하지 않습니다.

답변

관련 문제