Develop Reference

JS/jQuery not working in CodePen

I'm on CodePen, trying to practice using JS and jQuery in conjunction with HTML.
HTML:
<button>asdasads</button>
JS:
$('button').on('click', function() {
alert('woot');
});
Link to the pen, which doesn't work.
It's meant to display an alert when the button is clicked. But it does nothing.
Here's another one, with the same HTML/JS. The only difference is that I edited this second one out of a "make this paragraph disappear by clicking a button" example CodePen pen.
This CodePen pen works 100%.
which works just beatifully. The code is identical. What is going on here? I cannot find anything on Google, there's no mention of having to configure CP in any way to make your JS mingle with your HTML.
Then again... As a child there was a room in my parent's house that was being renovated and the floor was gone, leaving a fall to the basement. I played a game of opening and closing a door to the room, pretending to be surprised that the floor was gone. Until one time I actually forgot and ran in (yes, I fell), and that was only like the 4th time I opened the door. So, yeah.
Thank you in advance. This is my first go at asking here. Be gentle! :E

You need to add the jQuery library to the Pen. Just click the gear in the JS block, then click Quick Add, like in this photo

You need add JQuery (Add External JavaScript)
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Angular JS Angular input dropdown control not getting rendered properly

I am using your Angular JS Input Dropdown control, and I've followed the code example you put on your demo page to implement the control on a page in my PHP Laravel based website. I have found a problem with the implementation, though, and I was unable to identify what triggered it or how to fix it, so I was hoping that one of you may be of some assistance.
The issue consists of the control not getting rendered into the page until I refresh the page, then it shows up and works perfectly fine, right until I leave the page and get back to it; forcing me to refresh the page every time I re-enter it to be able to use the control.
To elaborate further, the control does not get rendered, but the page acknowledges that there is supposed to be a control on the page, which is why it displays a white blank space at the position where the control is supposed to be. So, I am pretty sure that it's a rendering issue.
The website is using Voyager which has a navigation sidebar, and if the page is entered via the sidebar button, the issue occurs, while if it was entered directly through the url bar or refreshed, then it works fine.
Has this ever happened to anyone before, and if so, how should I go on about fixing it? If not, then what do you propose might be the issue?
Thanks for taking your time to read this issue, and have a wonderful day.
Link to Angular control repository: https://github.com/hannaholl/angular-input-dropdown
EDIT: This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

This issue was self-fixed.
Solution: Manually bootstrap Angular JS.

How to trigger on "appearance in viewport"

I have a project made with Framework7. All content is programmed in one html file. The project contains several pages.
My goal is to update some spans ([id^='Update']) every second whenever they are visible but not when they are not visible on the screen. This will save traffic.
The problem I had with plugins like jQuery.inview or jQuery.appear is that they trigger on the first view but after this they always "see" the element even when I'm virtually on another page and the element is not visible to me.
Edited
If I run $.force_appear(); every second it updates the status - shouldn't this be done "always"?
However the new page just covers the first page - therefore the elements are not disappeared for the plugin even though I don't see them.
I hope this makes it clearer. Putting a demo online is too complex because I have to add the full framework.
Do you have any idea what I could do?

Mentio JS menu being added to bottom of the page

I'm trying to implement a Twitter style #mention interface using Angular JS and a library called MentioJS ()
The issue i'm having, is that after content is dynamically added to the page, I'm getting a rogue menu on the bottom of the page. I was able to replicate on the documentation page here:
http://jeff-collins.github.io/ment.io/?#/
By just hitting "Submit" at the bottom without changing anything. In Chrome, I see the default menu that opens in the first input show up again at the bottom of the page.
Any ideas why this might be happening?

I've encountered the same issue, as many others I think.
I've emptyed the array with the options for mentio-items (after pressing submit), which worked for me.
I`m sure this is not the right solution, but it fullfiels my needs.

I had the same issue with with ment.io, but as #Mihai Lazar pointed out after clearing array on submit, issue was resolved.
Regards..

JQuery Mobile: <script> tags do not show up but code runs

I'll refer to this ticket as step in the right direction for what I need:
jQuery mobile not loading new page scripts
One of the answers states that any code NOT nested in the first $([data-role=page]) tag in jQuery mobile will NOT show up in the html. I don't know if maybe this is a browser quirk or not but regardless, the code IS getting run despite it NEVER showing up. I find this difficult if I want to debug the js code since I can't add break points to any of it.
I've also had a problem with using the Jquery autocomplete plugin as it only works ONE time and then after submitting the form and returning the the form it no longer works. I believe this is because the page (well a partial piece of it by jquery mobile) gets reloaded and the autocomplete plugin is no longer bound to my textbox. I've tried using the live and on methods to make sure they get rebound but this doesn't work.
Can any javascript/jquery mobile geniuses out there help me out with this problem? Thanks!