Facebook login button event not firing for the first time in IE9

Question

I have a page in which i have added a customised facebook login button and im calling FB.Login() inside that click event.

It works fine in all browser except IE9 and IE8 , the problem is when for the first time i open my site and click on login button no pop up window comes. Once i refresh my page and click on button the pop up window occurs.

Below is my code:

<script type="text/javascript">
window.fbAsyncInit = function() {
      FB.init({
  appId: 'APPID',
        status     : true, 
        cookie     : true,
        xfbml      : true,
        oauth      : true
      });
  $("#fb").click(function () {

           FB.login(function(response) {//calling facebook login 

          }, {scope: 'user_photos,email,user_birthday,user_likes,user_activities,read_stream,user_religion_politics,user_relationships,user_education_history,user_work_history,user_hometown,user_location'});
  });

};
     (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {
       //alert("k");
       return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));

</script>
 <input type="button" class="fb" id="fb" />

I dont know if i'm correct or not, but i think initially that facebook object is not getting created thats why login window is not coming.

Answer 1

You have the click event being added to the #fb input on the Facebook AsyncInit . You cannot know for certain that this will run after the input has loaded.

In other words, you cannot guarantee the order of execution, the way you have structured the code, because the click event is added on a callback, and that callback can possibly be called before the DOM (and the input element) has fully loaded.

Try adding the event after the button for the code. Alternatively, investigate the .ready() method , to delay some portions of javascript code from executing until the DOM has fully loaded.