Develop Reference

On click event backfiring after adding nested anchor tag to section element

I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});

I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>

You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});

targeting only same page anchor links

From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>

Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>

var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});

When clicked inside div that is toggled to show, it toggles up

I have an annoying problem, I have a button that toggles a dropdown, my intention is to hide the div when clicked on the button again, which toggle achieves, and to hide the dropdown when clicked outside why my current jquery does. However when clicking inside the div itself, it slides back up.
HTML >
<div class="navPanel">
<!-- NAV -->
<nav>
<ul id="navBar">
<div class="dynamicNav">
<div class="menu1Container">
<li class="menu1">Books
<!-- DropDown1-->
<div id="dropdownContainer-1">
</div>
</li>
</div>
</div>
</ul>
</nav>
Jquery >
$(function(){
$(".menu1").click(function(){
$("#dropdownContainer-1").slideToggle(90);
});
$(document).click(function(event) {
if (!$(event.target).is(".menu1") && !$(event.target).is(".menu1")) {
$("#dropdownContainer-1").slideUp(90); //make all inactive
}
});
});
The obvious problem is event target, I tried using a similar method ->
$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
$('#dropdownContainer-1').slideUp(90);
}
});
If you could help me figure this one out, I'd appreciate it!

You may use:
$(event.target).closest(".menu1").length == 0
$(".menu1").click(function(e){
e.stopPropagation(); // avoid to propagate to document click
if ($(event.target).is(".menu1")) {
$("#dropdownContainer-1").slideToggle(90);
console.log('Menu1 toggled clicking menu1');
}
});
$(document).click(function(event) {
if ($(event.target).closest(".menu1").length == 0 &&
$("#dropdownContainer-1").is(':visible')) {
// if not inside area of menu1
$("#dropdownContainer-1").slideUp(90); //make all inactive
console.log('Menu1 closed clicking outside menu1');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navPanel">
<!-- NAV -->
<nav>
<ul id="navBar">
<div class="dynamicNav">
<div class="menu1Container" style="border-style: dotted;width:50%;">
<li class="menu1">Books
<!-- DropDown1-->
<div id="dropdownContainer-1">
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
<p>1111</p>
</div>
</li>
</div>
</div>
</ul>
</nav>
</div>

Open different divs on click

I searched for a way to show a DIVs content after clicking an image. I found a solution on JSFiddle here.
Now I'm trying to get it to work for 3 DIVs. That's how I've done that:
<script>
$("#lol_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#lol_team").toggle();
});
</script>
<script>
$("#csgo_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#csgo_team").toggle();
});
</script>
<script>
$("#cod_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#cod_team").toggle();
});
</script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/> <div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>
When I click at the firs/second/third div, all of them will open/close. What do I need to change so they will open/close one by one?.

Calling $("a").on("click") will attach the click event to all <a>'s on the page. You only want one anchor to effect one div, so you should attach ID's to all of them, and add the event to toggle them after. See the following updated code:
$("#lol_team").hide();
$("#lol_team_anchor").on("click", function(e){
e.preventDefault();
$("#lol_team").toggle();
});
$("#csgo_team").hide();
$("#csgo_team_anchor").on("click", function(e){
e.preventDefault();
$("#csgo_team").toggle();
});
$("#cod_team").hide();
$("#cod_team_anchor").on("click", function(e){
e.preventDefault();
$("#cod_team").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/> <div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>
Ideally though, you can simplify this to something like below:
//Hide all divs with class of 'toggleContainer' by default:
$('div.toggleContainer').hide();
//Attach a click event to all anchors with class of 'toggle'
$('a.toggle').on('click', function(e) {
//Ignore the click (Prevent it from trying to load whatever is in 'href'. If it's '#' (This will prevent the page from going to the top)
e.preventDefault();
//Get the associated toggle container for this anchor
$(this).next('div.toggleContainer').toggle();
});
//Hide all toggleContainers by default:
$('div.toggleContainer').hide();
$('a.toggle').on('click', function(e) {
e.preventDefault();
//Get the associated toggle container for this anchor
$(this).next('div.toggleContainer').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
<div class="toggleContainer">
<h2>CS:GO Team Lineup:</h2>
</div>
<!-- second team -->
<img src="./img/team_lol.png" alt="League of Legends"/>
<div class="toggleContainer">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<!-- thrid team -->
<img src="./img/team_cod.png" alt="Call of Duty"/>
<div class="toggleContainer">
<h2>Call of Duty Team Lineup:</h2>
</div>

give the <a> tags id's so that when you add the click event it will catch on only 1 anchor.
otherwise the click goes on every anchor in the page

All I did here is add a data-target attribute to each <a> with value as the ID of the corresponding div and use it to toggle the div. It's that simple
I also replaced the href="#" to href="javascript:;" to avoid the page to scroll at the top.
$('a').click(function(){
$($(this).attr('data-target')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->
<a href="javascript:;" data-target="#csgo_team">
<img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/>
</a>
<div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>
<br>
<!-- second team -->
<a href="javascript:;" data-target="#lol_team">
<img src="./img/team_lol.png" alt="League of Legends"/>
</a>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>
<br>
<!-- thrid team -->
<a href="javascript:;" data-target="#cod_team">
<img src="./img/team_cod.png" alt="Call of Duty"/>
</a>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>

Click not working in any condition

I have just a simple hyperlink on which when I am trying to add an click() event handler it is not working. I tried, .on(), .live(), .delegate() none of them worked. How can I do it?
I cannot make a fiddle becuase I don't know why my bootstrap.min.css is not getting included in the external resources section.
Please tell me any other way of doing it.
My Code:
HTML:
<div class="navbar nav-fixed-top navbar-inverse" style="min-height: 50px; margin-bottom: 0; box-shadow: 0px 2px 5px #222;">
<!-- Creating a fixed to the top navbar with no bottom margin and a nice little shadow and increasing the height -->
<div class="navbar-inner" style="border-radius: 0;min-height: 50px; ">
<!-- Creating the inner content of navbar and increasng it's height aswell to match the parent's height aswell -->
<div class="container-fluid">
<!-- Main header starts -->
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<!-- Small screen collapseable menu starts --> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<!-- The collapseable menu icon(becuase the three `icon-bar` make an icon :P) -->
</button> <a class="brand" href="#"><img src="img/logo.png"
style="height: 25px;" /> </a>
<!-- adding the logo to the header -->
<div class="nav-collapse collapse pull-right">
<!-- div holding collapseable menu's data -->
<ul class="nav">
<!-- creating a list to be created in the collapseable menu -->
<li>Register
</li>
<!-- adding an hyper link to the collapseable menu -->
</ul>
<!-- closing the list -->
</div>
<!-- closing the div holding collapseable menu's data -->
</div>
<!-- closing the main header -->
</div>
<!-- closing inner content holder of navbar div -->
</div>
<!-- closing the fixed to top navbar holder -->
CSS: Using bootstrap.min.css
JS:
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
Any suggesstions?

Change your code :
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of reg....
var i = 0; //click count
registerBtn.on('click', function (e) { // since registerBtn is a reference to anchor tag
e.prevenDefault(); // prevent default behaviour of anchor tag
.........
});
});

It's probably executing the handler binding before the element is created in the DOM. Either move the code to the end of the document (after the element has been created), or wrap it inside a ready event:
$(function() {
var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(registerBtn).on('click', function (e) {
i++;
if (i % 2 === 0) {
$("#register_frm").fadeToggle('fast', function () {
$("#login_frm").fadeToggle('fast');
});
$("#register").text('Register');
} else {
$("#login_frm").fadeToggle('fast', function () {
$("#register_frm").fadeToggle('fast');
});
$("#register").text('Login');
}
});
});