Facebook Login infinite loop

Question

I got a Problem with the Facebook Login on my page. First I tried it with only FB.Login but then i get following message: "FB.login() called when user is already connected."

So I added FB.getLoginStatus But now it keeps loggin me in, in a infinite loop. Even if i'm logged (into my system) and without me clicking on the FB-Connect Button.

How can I achieve it to not log me in until I click the FB-connect Button?

<div id="fb-root"></div>
<script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/fb_LT/all.js#xfbml=1&appId=198866780209581";
     fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

window.fbAsyncInit = function() {
      FB.init({
         appId      : "198866780209581", // App ID
         status     : true,
         cookie     : true,
         xfbml      : true,
         oauth      : true,
      });   
    var login = false;

 FB.getLoginStatus(function(response) {
    if (response.status === 'connected') {
      console.log('connected');
      login=true;
      $.ajax({
              type: "POST",
              url: "/?eID=login&modus=facebook&fb-login=1",
              data: $(this).serialize(),
              success: function(msg) {
              console.log("LOGIN");
              window.location.reload();
              }
            })
      var uid = response.authResponse.userID;
      var accessToken = response.authResponse.accessToken;
    }
    else{
      FB.login(function(response) {
       if (response.authResponse) {
       console.log('Welcome!  Fetching your information.... ');
       FB.api('/me', function(response) {
         console.log('Good to see you, ' + response.name + '.');
         if(login===false)
         {
           alert('nicht connected');
         }
       });
       } else {
       console.log('User cancelled login or did not fully authorize.');
       }   
     }, {scope: 'email'});
    }});
// Additional initialization code here
};

</script>

Answer 1

The solution was to change the click function like this:

$(".fb-login-button").live("click", function() {

}

My final code looks like this:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fb_LT/all.js#xfbml=1&appId=198866780209581";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
    FB.init({
      appId      : "198866780209581", // App ID
      status     : true,
      cookie     : true,
      xfbml      : true,
      oauth      : true,
    });   
    var login = false;
  $(".fb-login-button").live("click", function() {
FB.getLoginStatus(function(response) {
 alert('hier 1');
    if (response.status === 'connected') {
 alert('connected');
      console.log('connected');
      login=true;
      $.ajax({
              type: "POST",
              url: "/?eID=login&modus=facebook&fb-login=1",
              data: $(this).serialize(),
              success: function(msg) {
              console.log("LOGIN");
              window.location.reload();
              }
            })
      var uid = response.authResponse.userID;
      var accessToken = response.authResponse.accessToken;
    }
    else{
      alert('im else');
      FB.login(function(response) {
       if (response.authResponse) {
       console.log('Welcome!  Fetching your information.... ');
       FB.api('/me', function(response) {
         console.log('Good to see you, ' + response.name + '.');
         if(login===false)
         {
           alert('nicht connected');
         }
       });
       } else {
       console.log('User cancelled login or did not fully authorize.');
       }   
     }, {scope: 'email'});
    }});
});
// Additional initialization code here
};