Jquery для события нет привязки после FB логин SDK вызова - PullRequest
Новая
       6

Jquery для события нет привязки после FB логин SDK вызова

0 голосов
/ 29 апреля 2018

У меня есть SPA с кнопкой входа в систему FB, которая показывает, когда пользователь не вошел в систему. Если пользователь вошел в систему, то отображается другая страница.

По какой-то причине, когда мой логин fb определяет, что пользователь НЕ вошел в систему, он идет и получает html из правильного div (посредством идентификатора) и помещает html в этап 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 (function () до привязки события, то она будет работать, НО, если я переместлю ее после событие связывается, затем оно останавливается. Почему ??

Я подумал, что если бы я использовал привязку .on, то она работала бы, как только html появлялся на странице через мое приложение ...

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Лучшим вариантом будет добавить обработчик событий в <div class="stage">, который будет использовать делегирование события , чтобы перехватить событие для <a href="#" class="fbReg"> при вставке нового HTML в DOM.

или прикрепите обработчики событий после вставки 

 $(".fbReg").on("click", function()
                {
                    alert("clicked");
                });
0 голосов
/ 29 апреля 2018

Итак, если я правильно понимаю. Похоже, это проблема делегирования события. Подробнее об этом здесь (https://learn.jquery.com/events/event-delegation/)

В этом случае вы можете просто переключить слушателя с: 

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

Кому: 

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

Короче говоря, вы хотите разместить слушателя событий на чем-то, что, как вы можете гарантировать, существует, например, тело или сам документ.

...