jQuery on click trouble - javascript

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>

Related

How can I disable Javascript click function if link starts with #

How can I run this code on all links URL except links that start with # like bootstrap collapse, modal links etc.?
$(function(){
$("a").click(function() {
$(".se-pre-con").fadeOut("slow");
$(this).after("<div class='se-pre-con text-center pp500'><i class='fa fa-list fa-spin fa-5x fa-fw text-color1'></i></div>").fadeIn();
});
});
You can simply check the first character to make sure it isn't #.
$(function() {
$("a").click(function() {
if ($(this).attr("href").substr(0, 1) != "#") {
$(".se-pre-con").fadeOut("slow");
$(this).after("<div class='se-pre-con text-center pp500'><i class='fa fa-list fa-spin fa-5x fa-fw text-color1'></i></div>").fadeIn();
}
});
});
You can use the not selector in jquery. Example:
$(function(){
$("a:not([href='#'])").click(function(e){
e.preventDefault();
alert("You clicked me!");
});
});
a { display: block }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click Me!
Click Me Also!
Me Too!
Don't CLick me please!
Don't Click me!
note: preventDefault stops the link from opening
Just use CSS negation and prefix attribute selector:
$('a:not([href^="#"])').click(...)

js function onclick needs to click one time to change the font

an event is working fine in js when clicked twice to change the font.I want same should work on single click as well.
js code is below.
function changered() {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
}) }
HTML code is below.
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right"></i>
</div>
</a>
The problem is that you are setting the eventlistener after the first click, that's why you need the first click.
I'm not sure if it fits your needs since its a little different but you can change the color on the changered callback instead of adding an event listener. Something like:
function changered() {
icon = document.getElementById('iconsred');
icon.classList.toggle('fas');
icon.style.color= "#ff0000";
}
Any reason why you add the click event on the <a>?
iconsred does not have a click event, before you run changered() that is why you need to click it twice.
You could do it like this:
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
Demo
var iconsred = document.getElementById("iconsred")
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.target.style.color = "#ff0000";
})
<a href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>
It's because you create a new eventListener the first time it is clicked, and therefore it works the second time you make the click.
You can add it to the document, and only react on the specific element if you give it an id:
document.addEventListener('click', function(event) {
if(e.target.id === "yourId") {
event.target.style.color= "#ff0000";
}
})
You can try this.
After DOM loaded we are adding listener.
document.addEventListener("DOMContentLoaded", function(event) {
iconsred.addEventListener('click', function(event) {
event.target.classList.toggle('fas');
event.style.color= "#ff0000";
})
});
<a onclick="changered()" href="#">
<div class="thumb-down">
<i id="iconsred" class="far fa-thumbs-down fa-5x right">test</i>
</div>
</a>

JQuery - Not Switching Classes

It is late so I hope that I am missing something simple.
I have a div that uses a font-awesome fa-plus symbol. If clicked I want it to change to fa-minus and vice versa.
There is an additional class, add-team||remove-team, which is what the click event runs on.
It will change from + to - but not back to + when clicked a second time.
I have also done it from - to + and it doesn't change back to -.
Here is my div:
<div class="col-1 fa fa-plus add-team"></div>
And here are my simple jQuery lines:
$(".add-team").click(function () {
$(this).addClass("fa-minus remove-team").removeClass("fa-plus add-team");
});
$(".remove-team").click(function () {
$(this).addClass("fa-plus add-team").removeClass("fa-minus remove-team");
});
Hope that I'm just missing something simple. Thanks.
The problem is that your event listeners are only set to listen to elements that currently have those classes. The listeners do not dynamically change when the element's classes change. So since the element starts with add-team only the add-team listener is going to work.
What you can do is use setup a delegate event listener, a listener that is setup on a parent element that does not change, eg document and run the listeners off of that.
$(document).on('click','.add-team',function(){
//...
});
$(document).on('click','.remove-team',function(){
//...
});
But you can also just use a single event listener and use jQuery's toggleClass() to toggle all the classes in one call
$(this).toggleClass("fa-plus fa-minus add-team remove-team");
Demo
$(".col-1").click(function () {
$(this).toggleClass("fa-plus fa-minus add-team remove-team");
});
.col-1 {
font-size:24px;
font-weight:bold;
}
.fa-plus:after {
content:'+';
}
.fa-minus:after {
content:'-';
}
.add-team {
color:green;
}
.remove-team {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-1 fa fa-plus add-team"></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','🔓');
}
});

Categories

Resources