setInterval Not running inside click() function

Question

This question has not been asked before as I have searched quite extensively for an answer and I am hitting a brick wall.

When I run this code through the console or outisde an onclick function it works perfectly by opening a facebook oauth dialog and when it is finished it closes and the original page reloads.

var win = window.open('/auth/facebook','location=yes, scrollbars=yes, width=640, height=359', true);


var intervalID = setInterval(function(){
      if(win.closed){
          location.reload();
      }
 }, 100);

My problem is that within a click() function it doesn't work at all.

$(document).ready(function() {

        var intervalID = null;
        var win = null

        $("#flogin").click(function(){

            win = window.open('/auth/facebook','location=yes, scrollbars=yes, width=640, height=359', true);


            intervalID = setInterval(function(){
                    if(win.closed){
                        location.reload();
                    }

                }, 100);
        });
    });

This may seem like a really simple question to all of you and there may be a simple answer but I cannot seem to find. Thanks for your help!

Answer 1

as you mentioned on your comment you are using <a> tag
use preventDefault to prevent the default action

this should work

$(document).ready(function() {

    var intervalID = null;
    var win = null

    $("#flogin").click(function(event){
        event.preventDefault(); //prevents the default action
        win = window.open('/auth/facebook','location=yes, scrollbars=yes, width=640, height=359', true);


        intervalID = setInterval(function(){
                if(win.closed){
                    location.reload();
                }

            }, 100);
    });
});