Develop Reference

jQuery call different function when buttons class has changed

I'm a little stuck on the follow issue. I have a webpage that has a button when clicked it does some ajax things and if the result/response of that is successful then the buttons class is changed.
What I then want, if that changed button is clicked again, I want it to call a different function.
The first part works no problem. The ajax is called and the buttons class is changed so the colour and text of the button is changed. But when click the button again, I want to call the .btn.off function, but it remains to call the .btn.on function while I would have hoped it would call the .btn.off function.
Unfortunately, my knowledge of jQuery is not the best, any help in the right direction would be very much appreciated.
Thank you so much.
<button type="button" class="btn on btn-danger" id="123"><i class="fa fa-trash-o"></i><span>On</span></button>
<script>
$(document).ready(function(){
$(".btn.on").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn on btn-danger').addClass('btn off btn-success btn-sm');
$("span", this).text("Off");
});
$(".btn.off").click(function(){
//do some ajax stuf.....
$(this).removeClass('btn off btn-danger').addClass('btn on btn-danger btn-sm');
$("span", this).text("On");
});
});
</script>

$('.btn').click(function () {
var btn = $(this);
var isOn = btn.hasClass('on');
if (isOn) {
// do something maybe call on function or write logic for on
} else {
// do something maybe call off function or write logic for off
}
btn.toggleClass('on off'); // flip the on <-> off switch
$('span', this).text(isOn ? 'Off' : 'On'); // was on before toggle so flipped
})
You can do this by checking the classes and take action

The issue is because you're dynamically changing the classes on the element at runtime. One way to work around this is to use delegated event handlers, like this:
jQuery(function($) {
$(document).on('click', '.btn.on', function() {
// AJAX...
$(this).removeClass('on btn-danger').addClass('off btn-success btn-sm').find('span').text('Off');
});
$(document).on('click', '.btn.off', function() {
// AJAX...
$(this).removeClass('off btn-danger').addClass('on btn-danger btn-sm').find('span').text('On');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<button type="button" class="btn on btn-danger" id="123">
<i class="fa fa-trash-o"></i>
<span>On</span>
</button>

how to change an icon on click in meteor

In meteor, I am trying to change icon change on click (I used glyphicon Icons) to add favourites to list. I used toggleClass(). But it is not working,. Here I am attaching my code. When I refresh the page the icon is not changing. Can anyone help me with solution.
HTML Code:
<span class="glyphicon glyphicon-star-empty" style="color:green"></span>
And JS Code:
$(document).ready(function(){
$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-star-empty glyphicon-star');
});
});

This is how you do this:
Template.TemplateName.events({
"click .glyphicon": function(event){
$(event.currentTarget).toggleClass('glyphicon-star-empty glyphicon-star');
});

This should work:
Template.TemplateName.events({
$('.glyphicon').click(function(){
$(event.currentTarget).toggleClass('glyphicon-star-empty glyphicon-star');
});

You have to define an event:
Template.YourTemplateName.events({
"click .glyphicon": function(){
$(event.target).toggleClass('glyphicon-star-empty glyphicon-star');
}
});

javascript button toggle only one at a time

I'm trying to use buttons to filter a list of elements in a page.
So far if one of the buttons is clicked all the others will be disabled and then if I click a different one then only that will be enabled and the others will be disabled.
I cannot work out how to toggle it so if the button was already active it would un-disable all buttons including itself.
JS Fiddle
html:
<div class="calendar-filter">
<i class="material-icons"></i>Duty NCO
<i class="material-icons"></i>Main Cadets
<i class="material-icons"></i>Wing Marching Team
<i class="material-icons"></i>Juniors
<i class="material-icons"></i>Exercise
<i class="material-icons"></i>Other
</div>
js:
function filterButtonClick(buttonClass) {
$('.calendar-color-key').each(function() {
$(this).addClass('disabled');
if($(this).hasClass(buttonClass)) {
$(this).removeClass('disabled');
}
});
}
$('.calendar-color-key').on('click', function() {
var filterButtonClasses = this.classList;
filterButtonClick(filterButtonClasses[0]);
});

$(".calendar-color-key").click(function() { //select by class
var clicked = $(this);
if (clicked.hasClass('toggle')) {
$('.calendar-color-key').removeClass('disabled'); //enable all again
clicked.removeClass('toggle');
} else {
$('.calendar-color-key').removeClass('toggle');
clicked.addClass('toggle');
clicked.removeClass('disabled');
$('.calendar-color-key').not(clicked).addClass('disabled'); //disable everything except clicked element
}
});
https://jsfiddle.net/6kx8ncdb/2/

Why not just use a class default class for your buttons like filter-button so when you want to disable them all just use:
$(".filter-button").addClass("disabled");
And use an active class it would be a big help so you can have
$(".active").on('click', function(){
$(".filter-button").addClass("disabled");
$(".active").removeClass("active");
});
UPDATE: don't forget to remove the active class when adding disabled I updated the code.

Can't trigger action after changing element's ID

I have a show/hide password button, when I click to SHOW the password, it works, but when I try to hide it again it doesn't.
Fiddle: http://jsfiddle.net/vcvgj09z/
<input type="password" id="pass1" value="Now try to hide me">
<i class="fa fa-eye"></i> Show
$("#show-password").on("click",function() {
$(this).html('<i class="fa fa-eye-slash"></i> Hide');
$(this).prop("id","hide-password");
$("#pass1").attr("type","text");
});
$("#hide-password").on("click",function() {
$(this).html('<i class="fa fa-eye"></i> Show');
$(this).prop("id","show-password");
$("#pass1").attr("type","password");
});

As per my comment, the reason why your code is not working is because the element #hide-password is not present in the DOM at runtime, so no click events will be bound to it.
Although you can use .on() to listen to event bubbling, I strongly advise against changing IDs of elements. Instead, you can store the toggle on/off state as a jQuery data object. The advantages of this method is that:
does not rely on changing the markup and event bubbling
stores the toggle state of the password by evaluating and modifying the jQuery data object
allows other elements to manipulate/influence the toggle state
See fiddle here: http://jsfiddle.net/teddyrised/vcvgj09z/10/
$('#toggle-password').click(function() {
// Check state
if(!$(this).data('state') || $(this).data('state') == 0) {
// If the data object "state" is undefined or have a value of 0, convert password to text
// Update HTML and data object
$(this)
.html('<i class="fa fa-eye-slash"></i> Hide')
.data('state', 1);
// Change password to text
$("#pass1").attr('type', 'text');
} else {
// If the data object "state" has a value of 1, convert text to password
// Update HTML and data object
$(this)
.html('<i class="fa fa-eye"></i> Show')
.data('state', 0);
// Change text to password
$("#pass1").attr("type","password");
}
});

Try something like this ...
$("body").on("click", "#show-password", function() {
... and associated ...
$("body").on("click", "#hide-password", function() {
This way when the ID dynamically changes, the on-click's will work.

Your code doesnt work because it does not support the dynamically setted elements.
The correct way to set the events for dynamically added elements is by using $(document).on().
JS:
$(document).on("click", "#show-password", function() {
$(this).html('<i class="fa fa-eye-slash"></i> Hide');
$(this).prop("id","hide-password");
$("#pass1").attr("type","text");
});
$(document).on("click", "#hide-password", function() {
$(this).html('<i class="fa fa-eye"></i> Show');
$(this).prop("id","show-password");
$("#pass1").attr("type","password");
});
Updated jsFiddle

You should use delegate. Because you generated new DOM
$(document).on("click","#show-password",function() {
//....
});
$(document).on("click","#hide-password",function() {
//....
});

Click issue if button has childs

I've:
backdrop = document.getElementById('backdrop');
dialog = document.getElementById('dialog');
dialog_body = document.querySelector('#dialog .body');
document.addEventListener('click', function(e) {
if ( matches.call(e.target, '[data-show=dialog]')) {
buoy.addClass(backdrop, 'fadeIn');
buoy.addClass(dialog, 'fadeIn');
var href = e.target.parentNode.getAttribute('action');
dialog_body.innerHTML = '<div>FOOOOO</div>';
[].forEach.call(document.querySelectorAll('[data-hide=dialog]'), function(el) {
el.addEventListener('click', function() {
buoy.removeClass(backdrop, 'fadeIn');
buoy.removeClass(dialog, 'fadeIn');
})
})
}
}, false);
and [data-show=dialog] is:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
</button>
If I click on
<i class="ellipsis-v"></i>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
the code works perfectly..
Also if I have:
<button type="sumit" class="btn xs default" data-show="dialog">
<i class="ellipsis-v"></i>
<span>fooo</span>
</button>
If I click on
<i class="ellipsis-v"></i>
or
<span>fooo</span>
the code doesn't work..
If I click out of
<i class="ellipsis-v"></i>
or
span>fooo</span>
the code works perfectly..
What is the problem?

Why Not:
function handler(e){
var t=e.target;
if(t.dataset['show']=='dialog'||t.parentNode.dataset['show']=='dialog'){
/* code ...... */
}
}
document.addEventListener('click',handler,false);
in this case you have one eventHandler.(no loops).
you can add that handler to the parentNode for simplicity.
and you have to add a better check for t.dataset['show']=='dialog' as it produces an error if it has no dataset. (i wrote it just to give you an idea)
btw you search for data-hide but you have only data-show
if you have any questions just ask..
if i misunderstood your question tell me so i can reelaborate the code.
DEMO
http://jsfiddle.net/A7xk2/1/
Less eventHadlers is always more performance...
also in this example i'm just writing now... i need alot of mouse events and most of them are on the document itself...
http://jsfiddle.net/LxX34/12/
EDIT
Add the click handler on the btn elements
it works on span on li and on button as you can see in this example.
maybe your li has some sort of preventDefault or return false??
http://jsfiddle.net/A7xk2/2/