FB Connect on click event

Question

I need to make sure my Facebook Connect code runs on a click event, but no matter how I try I cannot get it to work. It has to be something simple but I just cannot figure it out. This is my latest attempt, however if I put an alert into the code after FB.Event.subscribe it never reaches it. The code does run from within document.ready, but I need it to run on a click event. The live URL is lovelyjubbly.info/en-GB/Gameplan.

    <div class="facebookconnect">
            <div id="fb-root"></div>

            <script language="javascript" type="text/javascript" src="http://connect.facebook.net/@Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>

            <script type="text/javascript">

                $(document).ready(function () {

                    window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });

                });

                function fbclick()
                {
                    FB.Event.subscribe('auth.login', function (response) {
                        alert("loggedin");
                        var isUserAuthenticated = @User.Identity.IsAuthenticated.ToString().ToLower();

                        if ((response.status == 'connected') && (isUserAuthenticated == false)){
                            window.location.href = '@Account.Urls.FacebookConnect()';
                        }
                    });
                }

            </script>

            <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/" + @Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

           <fb:login-button onclick="fbclick()" autologoutlink="false" perms="email" id="fbLogin">

           </fb:login-button>

        </div><br />

EDIT : Using live() method, still doesn't seem to work :

    <div class="facebookconnect">
            <div id="fb-root"></div>

            <script language="javascript" type="text/javascript" src="http://connect.facebook.net/@Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_')/all.js"></script>

            <script type="text/javascript">

                $(document).ready(function () {

                    window.FB.init({ appId: 'abc', status: true, cookie: true, xfbml: true });

                });

                $("#fbLogin").live("click", function(){ 
                    FB.Event.subscribe('auth.login', function (response) {
                        alert("loggedin");
                        var isUserAuthenticated = @User.Identity.IsAuthenticated.ToString().ToLower();

                        if ((response.status == 'connected') && (isUserAuthenticated == false)){
                            window.location.href = '@Account.Urls.FacebookConnect()';
                        }
                    });
                }); 


            </script>

            <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/" + @Thread.CurrentThread.CurrentUICulture.Name.Replace('-', '_') + "/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

           <fb:login-button autologoutlink="false" perms="email" id="fbLogin">

           </fb:login-button>

        </div><br />

Answer 1

Use

$(yourselector).live('click', function() {
   //fb stuff
});

I can't quite remember why this works, but it certainly seems to.