We Keep Coding

How to toggle one of many links with icons using JavaScript

I have several dynamically created links which rendered as buttons and the buttons texts are replaced with icons. I need to toggle one of the link button icons when clicked. The method that I am using is not working out. See code below: I do not want to use JQuery at this time unless it’s within a function.
<a class="button" onclick="command('removeFormat');" title="Remove Format"><i class="fas fa-eraser"></i></a>
<a class="button" onclick="command('fullScreen');" title="Full Screen"><i class="fas fa-expand"></i></a>
<a class="button" onclick="doToggleView();" title="Source"><i class="fa fa-code"></i></a>
<a class="button" onclick="submitForm();" title="Save"><i class="far fa-save"></i></a>
//JS
function command(cmd){
if(cmd == 'fullScreen'){
$(".fa-expand").toggleClass('fa-expand fa-compress');
}else{
$(".fa-compress").toggleClass('fa-compress fa-expand');
}
}
I also try using the following codes:
$("i").toggleClass('fa-compress fa-expand');
$("a .button").find("i").toggleClass('fa-expand fa-compress');

This is the fix to resolve the issue.
function command(cmd){
$('i.fas').toggleClass('fa-expand fa-compress');
}

JavaScript (jQuery) does not react anymore after I have changed the element [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have 2 links:
<span id="a-start-container">
<a id="a-start" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
<span id="a-stop-container">
<a id="a-stop" href="#">
<i class="fa fa-fw fa-play inner-circle-color"></i>
</a>
</span>
When I click on the first one (a-start) I'm disabling it by removing the <a> element and at the same time I enable the second one (a-stop) by adding the <a> element:
$(document).ready(function() {
$("#a-start").click(function(e){
$("#a-stop-container").html("<a id='a-stop' href=''><i class='fa fa-fw fa-stop inner-circle-color'></a>");
$("#a-start-container").html("<i class='fa fa-fw fa-play inner-circle-color'>");
})
});
When I click on the second one (a-stop) I'm disabling it by removing the <a> element and at the same time I enable the first one (a-start) by adding the <a> element:
$(document).ready(function() {
$("#a-stop").click(function(e){
$("#a-start-container").html("<a id='a-start' href=''><i class='fa fa-fw fa-play inner-circle-color'></a>");
$("#a-stop-container").html("<i class='fa fa-fw fa-stop inner-circle-color-off'>");
})
});
The problem is that it works only for the first click. For example I click on the first one (a-start), then it changes a-start and enables a-stop. But then, when I click on a-stop, JavaScript does not react anymore. The same situation the other way round. Both work fine until the <a> element gets changed - then I have to reload the page to get it run again.
There is no information in the console.
What am I doing wrong?

you should consider changing it to on instead of click based on the pattern that you are using. Usage of on can be found her: http://api.jquery.com/on/
What you are doing is replacing entire DOM content on which handler/listener is registered and thus it dont get re-registered on DOM change which is happening after first click event.
However what seemed like you only wanted to toggle class-name and text of the link which should have been handled via http://api.jquery.com/toggleClass/ which would be more appropriate.

ng-click not working in font-awesome icon

I have added my demo to: this link When I click on thumbs up (comes from fontawesome) ng-click does not trigger and like count does not change. When I click to xyz, like count increases.
This is not working:
<i ng-click="LikeComment(comment)" class="far fa-thumbs-up"></i> {{comment.like}}
But this is working:
<i ng-click="LikeComment(comment)">xyz</i> {{comment.like}}

Try this:
<span ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></span>{{comment.like}}
OR, in case you are ok with a button
<button ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></button>{{comment.like}}

Font awesome turns it into a <svg> tag which doesn't seem to collaborate too well with the click handler. Try wrapping the <i> in a <div> like this
https://jsfiddle.net/wewekvkw/26/

Basic HTML/JavaScript confusion re single/double quotes in Bootstrap popover

Trying to add a link in a Bootstrap popover (to go to a "Help" page). Seen all sorts of complicated solutions of getting a link inside a popover but someone suggested a simple onclick window.open. Seemed an interesting solution BUT I am in double/single quote hell.
I am using phpStorm which does a pretty good job highlighting errors. What I am trying is:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick='window.open("http://www.google.com/");' title='test add link'>
link to content</a> Right?"></i>
Here is the original I copied:
link
My problem is that when I switch single to double I get an error at the initial " of ("http://www.google.com/"); and have an unclosed tag.
What am I not understanding re this call please.

Try using " within the HTML attribute:
<i class="explain fa fa-question-circle text-primary"
data-toggle="popover" data-trigger="focus" tabindex="0" title="Popover title"
data-content="And here's some amazing content. It's very engaging.<a href='#'
onclick="window.open('http://www.google.com/');" title='test add link'>
link to content</a> Right?"></i>
Compare here: How to properly escape quotes inside html attributes?

You need to include data-html="true" along with your other data-*
Here is the jsFiddle

How to specify classes using Jquery

I have created a simple toggle show and hide.
I have a problem though when duplicating the classes.
My toggle works but when I duplicate the containers and press the trigger it shows all containers not just the one.
I have tried to adjust my code using the (this).find function but its not working. can someone show me where i am going wrong?
<!--SHARE-->
<i class="fa fa-share"></i>Share
<div class="show-share-box">
<div class="share-this-wrap">
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Facebook">
<i class="fa fa-facebook"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">4</span>
</div>
</a>
<a href="#" data-toggle="tooltip" class="share-popup share-btn" title="Share on Twitter">
<i class="fa fa-twitter"></i>
<div class="meta-share-wrap">
<span class="shot-social-count">6</span>
</div>
</a>
</div>
</div><!--end share box-->
My code that works.
$(".share-trigger").click(function(e){
e.preventDefault();
$(".show-share-box").slideToggle('slow');
})
My code that is not working - here i have tried to add the (this function)
$(".share-trigger").click(function(e){
e.preventDefault();
$(this).find('.show-share-box').slideToggle('slow');
})
Thanks a bunch!!

Next will select all .show-share-box so using the first in the next set should do the trick.
$(".share-trigger").click(function(e){
e.preventDefault();
//$(".show-share-box").slideToggle('slow');
$(this).next(".show-share-box").first().slideToggle('slow');
})

the problem is you are selecting <a> element as $(this) and finding inside ('.show-share-box') which is sitting outside your <a>
you can use .next() or directly use class to toggle
Jsfiddle: http://jsfiddle.net/FtgN4/2/
$(".share-trigger").click(function (e) {
e.preventDefault();
$('.show-share-box').slideToggle("slow", function () {
// animation complete
});
})

Should be:
$(this).next('.show-share-box').slideToggle('slow');

$(this).find('.show-share-box').slideToggle('slow');
$(this) --> refers to the current element which is .share-trigger in your case
$(this).find('.show-share-box') means find the .show-share-box inside .share-trigger
your code not working as there is no element .show-share-box inside .share-trigger
Updated after OP updated question.
.next()
$(this).next('.show-share-box').slideToggle('slow');