Develop Reference

How I can prevent the click event on a link which is nested on another element which also use onclick?

I have this simple code
<span class="doit"><a class="doit"href="ww.domain.com">text</a></span>
I want the click on the class "do it" fired a function, so I tried this
$(document).on('click', '.doit', function(e) {
// prevents to handle the click for nested objects again
e.stopPropagation();
alert("hello world");
});
Now I have the problem, that if I click on the <a href the link from href will open and not the on.click function will be fired.
How I can prevent, that the link will be fired instead of the on.click event?
UPDATE 1
I tried a suggested answer with this, failed because the href link is already opened. I must prepare to open the link, only the on.click event should work.
<span class="doit">
<a class="doit" href="http://www.example.com" target="_blank">webcms von
<span class="doit">ABC</span>
<span class="doit">123</span>
</a>
</span>
if ($(e.target).is("a")) {
e.preventDefault(); // stop the href
alert("I WILLL not go to " + e.target.href);
e.cancelBubble = true; // do not click through
e.stopPropagation(); // just stop the event or it will trigger again on the span
return false;
}
console.log('target:'+e.target);
In the console I read: [object HTMLSpanElement
I must find a way, which works in every way the html-tags are ordered or nested.
Update 2
if ($(e.target).is("a"))
{
e.preventDefault(); // stop the href
}
e.cancelBubble=true; // do not click through
e.stopPropagation(); // just stop the event or it will trigger again on the span
alert("hello world");
I see the alert 'hello world' but after that, the link will still be opened

Just test
However I do not recommend you give the same class to the two elements
Here you can click the link and the onclick of the span triggers but not the href
Nested spans are not correct HTML by the way
$(document).on('click', '.doit', function(e) {
if ($(e.target).is("a")) {
e.preventDefault(); // stop the href
alert("I WILLL not go to " + e.target.href);
}
e.cancelBubble=true; // do not click through
e.stopPropagation(); // just stop the event or it will trigger again on the span
alert("hello world");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="doit">
<a class="doit" href="http://www.example.com" target="_blank">webcms von
<span class="doit">4U</span>
<span class="doit">.tools</span>
</a>
</span>
Alternative
$(document)
.on('click', 'a.doit', function(e) {
e.preventDefault();
alert("I WILLL not go to " + e.target.href);
})
.on('click', 'span.doit', function(e) {
alert("hello world");
e.cancelBubble=true; e.stopPropagation()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="doit">
<a class="doit" href="http://www.example.com" target="_blank">webcms von
<span class="doit">4U</span>
<span class="doit">.tools</span>
</a>
</span>

Changing bootstrap glyphicon onclick function

I'm trying to swap .glyphicon-menu-down to glyphicon-menu-up when user click on the link. What am I doing wrong? It's not working. Am I miss-using jquery?
Markup
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Admin
<span class="panelarrow glyphicon glyphicon-menu-down pull-right"></span></a>
Script
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});

In your case $(this) refers to .panelarrow and you are trying to find span element inside that .panelarrow.
Solution:
$(document).ready(function() {
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});
Or if you want to change your icon by clicking on the a element use this:
$(document).ready(function() {
$('[data-toggle="collapse"]').click(function(){
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
});
});

Clicking on the span (which includes the glyphicon) will let you use "this" to refer to the span - then the toggle classes can be included in the one command:
$(document).ready(function(){
$('.panelarrow').click(function(){
$(this).toggleClass('glyphicon-menu-down glyphicon-menu-up');
});
});

jQuery on click trouble

I am having trouble with my jQuery on click function. I can't figure out what I'm doing wrong since it isn't even registering the click in the console (I have set breakpoints and it refuses to visit my on click). I am using jQuery in other areas of my code, so I think I have linked it correctly, and I have checked the target several times to make sure that it is a class and I'm using the correct syntax, but I must have missed something. I feel like I have just been looking at it too long. Any help would be appreciated.
HTML:
<h3 class="collapseButton leftH3" data-toggle="collapse" data-target=".collapse_me">
Returns information about the current User
<span class="pull-right" id="arrow_me">
<i class="fa fa-arrow-down" aria-hidden="true"></i>
</span>
</h3>
JS:
function changeArrows() {
$('.collapseButton').on("click", function() {
$(this).next('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
}
changeArrows();

You have to use children not next
function changeArrows() {
$('.collapseButton').on("click", function() {
$(this).children('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
}

The on click is triggert but your selecotor is not correct.
$(this).children('.pull-right').html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
works fine for me (changed next for children)

Have you tried
$(document).ready(function(){
changeArrows();
});

Okay, rewrote it to do what you want it to do. Note that instead of next() (which gets the following sibling element with the given selector), you want children() (which gets the child elements of $(this)).
$(this) ends up resolving to be the h3 element in almost every case.
$(document).ready(function() {
$('.collapseButton').on('click', function(event) {
$(this).children('.pull-right')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
});

Try putting the body of your function in $(document).ready( ... ). I don't think your event handler is available after this function is run. The .next() will also find the next sibling, but the element you're wanting to change is a child.
$(document).ready(function() {
$('.collapseButton').on("click", function() {
$(this).children('.fa.fa-arrow-up')
.html('<i class="fa fa-arrow-up" aria-hidden="true"></i>');
});
})

You can also just toggle the class for the i element without changing html:
$(".collapseButton").click(function(e) {
$(this).children('.pull-right').children('.fa-arrow-down').toggleClass('fa-arrow-up');
});

function setVisibility(id1,id2,id3) {
if(document.getElementById('bt1').value=='Show Box 3'){
document.getElementById('bt1').value = 'Show Box 4';
document.getElementById('bt1').value = 'Show Box 5';
document.getElementById(id1).style.display = 'inline';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
}else{
document.getElementById('bt1').value = 'Show Box 3';
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'inline';
document.getElementById(id3).style.display = 'inline';
}
}
<h4 class="pro_detail_title_name_new" >Product Description
<button type=button name=type id='bt1' onclick="setVisibility('sub3','sub4','sub5');";><span id="sub3" class="mobile-plus1"style="display:inline;" >+ </span><span id="sub5" class="fbutton"style="display:none;">-</span> </button></h4>
<div id="sub4"style="display:none;">-- inside --</div>

Condensing/Optimizing jQuery code

I have the following code for sliding down a hidden content area. It works, but I suspect it's too clumsy and may fire too many requests or events. Can someone suggest a way to combinee these functions more efficiently?
$(".toggler").click(function (event){
event.stopPropagation();
$("#mobile-top").animate({'height':'toggle'}, 250);
});
$("#mobile-top").click(function(event){
event.stopPropagation();
});
$('.toggler').toggle(function() {
$(this).html('Close This Box <em class="fa fa-chevron-up"></em>');
}, function() {
$(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>');
});
$('html').click(function(){
$("#mobile-top").slideUp();
$(".toggler").html('Connect With Us! <em class="fa fa-chevron-down"></em>');
});

I think the code could be improved by using variables when you can especially when using a certain selector more than once.
and try and use ID's not classes.
EDIT
UPDATED JSFIDDLE
Here is the code that is working and wont get confused when you click outside in the HTML area. (note that while naming a variable it can't contain a - character like I had put before)
$(document).ready(function(){
var toggler = $("#toggler");
var mobileTop = $("#mobile-top");
//top drop-down content animation
toggler.click(function(event){
event.stopPropagation();
mobileTop.slideToggle(250);
$(this).toggleClass('open');
$(this).html('Connect With Us! <em class="fa fa-chevron-down"></em>');
$(".open").html('Close This Box <em class="fa fa-chevron-up"></em>');
});
$('html').click(function(){
mobileTop.slideUp(250);
toggler.html('Connect With Us! <em class="fa fa-chevron-down"></em>');
toggler.removeClass('open');
});
$(mobileTop).click(function(event){
event.stopPropagation();
});
});
And this should be more efficient as well.
a good read:
http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551

Change a icon fonts when clicking on it

This is my html:
<div class="menu">
<span aria-hidden="true" class="btn" data-icon="🔓"></span>
</div>
And when I click on span tag I would like data-icon will change: data-icon="🔓
$icon = $(event.currentTarget)
if $icon.attr('data-icon') == '🔓'
$icon.attr('data-icon', "🔒")
else
$icon.attr('data-icon', "🔓")
But although 'data-icon' changed correctly, the screen displays the string 🔓 instead the icon.

This is the solution:
$.parseHTML("🔒")[0].data
So, the complete code:
$icon = $(event.currentTarget)
if $icon.attr('data-icon') == $.parseHTML("🔒")[0].data
$icon.attr('data-icon', $.parseHTML("🔓")[0].data)
else
$icon.attr('data-icon', $.parseHTML("🔒")[0].data)

<div class="menu">
<span aria-hidden="true" class="btn" data-icon="🔓" id="yourspan"></span>
</div>
Using the id of your span
$("#yourspan").on('click',function(){
if($("#yourspan").attr('data-icon')=='🔓'){
$("#yourspan").attr('data-icon','🔒');
}
else{
$("#yourspan").attr('data-icon','🔓')
}
});

Improving answer by Deepu, check this
$('body').on('click', '#yourspan', function(){
if($(this).attr('data-icon')=='🔓'){
$(this).attr('data-icon','🔒');
}
else{
$(this).attr('data-icon','🔓');
}
});