Javascript FB登录sdk调用后事件无绑定的Jquery

我有一个SPA，有一个FB登录按钮，当用户未登录时显示。如果用户登录，则会显示不同的页面

出于某种原因，当我的fb登录确定用户未登录时，它会从正确的div（通过ID）获取html，并将html放入stage div。。。但是，那么FBLogin按钮上的我的事件侦听器不工作/不存在，没有绑定

            window.fbAsyncInit = function() {
                // FB JavaScript SDK configuration and setup
                FB.init({
                  appId      : 'SOME ID', // FB App ID
                  cookie     : true,  // enable cookies to allow the server to access the session
                  xfbml      : true,  // parse social plugins on this page
                  version    : 'v2.8' // use graph api version 2.8
                });

                // Check whether the user already logged in
                FB.getLoginStatus(function(response) {
                    if (response.status === 'connected') {
                        //display user data
                        getFbUserData();
                        changeToPage("appFeed");
                    } else {
                        changeToPage("loginprompt");
                    }
                });
            };

            // Load the JavaScript SDK asynchronously
            (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/en_US/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            // Facebook login with JavaScript SDK
            function fbLogin() {
                FB.login(function (response) {
                    if (response.authResponse) {
                        // Get and display the user profile data
                        getFbUserData();
                    } else {
                        document.getElementById('status').innerHTML = 'User cancelled login or did not fully authorize.';
                    }
                }, {scope: 'email'});
            }

            // Fetch the user profile data from facebook
            function getFbUserData(){
                FB.api('/me', {locale: 'en_US', fields: 'id,first_name,last_name,email,link,gender,locale,picture'},
                function (response) {
                    // Save user data
                    console.log(response.first_name);
                });
            }


            function changeToPage(loadPage)
            {
                // html is contained within another div so get the html and place it into our stage div. 
                var loadPageHTML = $("#"+loadPage).html();

                // move it into the page... 
                $(".stage").html(loadPageHTML);
            }

            $(document).ready(function() {
                $(".fbReg").on("click", function()
                {
                    alert("clicked");
                });
            });

我使用的html基础是

    <div id="application"> 

        <!-- this will show to our user -->
        <div class="stage">
            <!-- content gets added here -->
        </div>

    </div>


<!-- if no user logged in, we prompt for FB login and create account -->
<div id="loginprompt" class="page">
    <a href="#" class="fbReg">Login With FaceBook</a>
</div>

---

我认为问题出在getLoginStatus上，因为如果我将changeToPage函数注释掉并将其移动到$（document）.ready（函数（）中，在事件绑定之前，它会工作，但是如果我在事件绑定之后移动它，它会停止。为什么

---

我想如果我使用.on绑定，那么一旦html通过我的应用程序到达页面，它就会工作…

所以假设我理解正确。这听起来像是一个事件委派问题。请在此处阅读更多相关信息（）

在这种情况下，您应该能够简单地从以下位置切换侦听器：

$(".fbReg").on("click", function () {
    alert("clicked");
});

致：

---

简而言之，您希望将事件侦听器放置在可以保证存在的对象上，如正文或文档本身。

更好的选择是将事件处理程序添加到

中，当您向DOM插入新HTML时，它将用于捕获

的事件

或在插入后附加事件处理程序

 $(".fbReg").on("click", function()
                {
                    alert("clicked");
                });

---

这并没有解决问题。请参阅我上面的修改注释以获取另一条线索。在文档中包含单击处理程序。ready本质上是Gandhi_rahul建议的。在将新html插入页面后，您将绑定事件处理程序。您可以尝试将单击处理程序移动到changeToPage（）中函数来完成同样的事情。我认为问题在于getLoginStatus，因为如果我将changeToPage函数注释掉，并将其移动到$（document）.ready（函数（）中，在事件绑定之前，它会工作，但是如果我在事件绑定之后移动它，它就会停止。为什么？？

 $(".fbReg").on("click", function()
                {
                    alert("clicked");
                });