Hello FCC,
I’m working on building my twitch.tv app. As it stands, I currently have all of the data I need to gather from the API so I am working on displaying it in an interesting way.
My concept was to have my app look like a mobile phone. The user is first presented with a bunch of icons (icons page). When the user clicks the twitch icon on the phone I want the app info to be displayed on the phone screen (who is online, offline, streaming or not etc). When the user clicks the bottom “home” button on the phone I want the icons page to be displayed again.
Right now all I am trying to do is implement is:
-user clicks twitch icon
-screen clears
-users clicks home button on bottom of phone
-screen is populated with same icon page
let iconHtml = $('.icon-container').html();
//html that displays my icon screen. capture for later
//when clicked, remove all the icons (and later display app)
$('#twitch-icon').click(function(){
$('.icon-container').children().remove();
});
//when home button is clicked, display the icons on screen again
$('.button-inner').click(function(){
$('.icon-container').append(iconHtml);
});
This code does not behave how I expect it to. When I click the twitch icon the screen does clear. The FIRST TIME I click the home button the icons DO reappear on the screen. Then, if i click the twitch icon AGAIN (2nd time) the screen will not clear. I have checked with a console.log() and the “click” event does NOT register after the screen has been cleared once and the HTML reappended.
What I think is happening here is that when I reappend the html elements i stored in var iconHtml jQuery somehow loses reference to the selector, so the second click event is never heard (though i may be wrong).
Could anyone give me some guidance in tackling this problem? I realize that this may be hard to visualize so you can check out the codepen here: twitch tv application
I commented out all my JS code that handles API calls. So the code that is uncommented is the code in question.
Thanks a lot FCC and happy coding / happy holidays