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');
}
});
Related
I'm trying to give the button a new content if it's clicked. I also add new classes. That work's perfectly fine on the first click but for some reason the innerhtml ins't changing after clicking a second time on it..
HTML:
<button class="btn btn-warning btn-invisible"><i class="fa fa-eye-slash"></i></button>
jQuery:
$('.btn-invisible').click(function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('.btn-visible').click(function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
I got this fiddle ready: https://jsfiddle.net/dthee9w6/7/
Would love if someone could help.
You should use 'on' instead of 'click', so that you can play with dynamically added elements.
$('body').on('click','.btn-invisible',function() {
$(this).removeClass('btn-invisible');
$(this).addClass('btn-visible');
$(this).html('<i class="fa fa-eye"></i>');
});
$('body').on('click','.btn-visible',function() {
$(this).removeClass('btn-visible');
$(this).addClass('btn-invisible');
$(this).html('<i class="fa fa-eye-slash"></i>');
});
hope it helps.
Wrap your code in $(function(){}) ,which is $(document).ready(function(){
});, apart from this every thing is fine
There is no need to update the html each time on the click , all you need to do is add and remove neccessary classes.
For the first click, you are removing invisible class and what if one clicked next time, it tries to remove invisible class again which is not there, it throws an error here,you should use toggleClass
$(function() {
$('.btn-invisible').click(function() {
$(this).toggleClass('btn-invisible');
if (!$(this).hasClass('btn-visible')) {
$(this).addClass('btn-visible');
$(this).find('.fa').removeClass('fa-eye-slash').addClass('fa-eye');
}
});
$('.btn-visible').click(function() {
$(this).toggleClass('btn-visible');
if (!$(this).hasClass('btn-invisible')) {
$(this).addClass('btn-invisible');
$(this).find('.fa').removeClass('fa-eye').addClass('fa-eye-slash');
}
});
});
Hope it helps
I want to change button icon and disable the button after I clicked/added the object.
I thought to use javascript to accomplish this handling.
something like this:
--javascript--
$('#catBut').click(function(){
$(this).find('span')
.toggleClass('glyphicon glyphicon-plus')
.toggleClass('glyphicon glyphicon-ok');
})
;
--view--
#using (Html.BeginForm("Add", "VerlangLijst", new { naam = materiaal.Naam }, FormMethod.Post))
{
<button id="catBut" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
</button>
}
But somehow it doesn't work. I have added the new .js file to the bundleConfig.
Can someone tell me what's wrong?
thanks
Try changing
$(this).find('span').toggleClass('glyphicon glyphicon-plus').toggleClass('glyphicon glyphicon-ok');
to
$(this).find('span').addClass('glyphicon-ok').removeClass('glyphicon-plus');
To disable the button:
$('#catBut').prop("disabled",true);
To disable the button, try something like :
$('#catBut').click(function(){
$(this).find('span').toggleClass('glyphicon-plus').toggleClass('glyphicon-ok');
$('#catBut').prop("disabled", true);
});
This will remove the "plus" icon from the button, add the "ok" icon and set disabled=true on button "catBut", hence disabling it.
You may also try (if the above solution doesn't work) :
$(document).on("click", "#catBut", function(){
$('#catBut').find('span').removeClass('glyphicon-plus').addClass('glyphicon-ok');
$('#catBut').prop("disabled", true);
});
OR
$(document).on("click", "#catBut", function(){
$('#catBut').find('span').toggleClass('glyphicon-plus').toggleClass('glyphicon-ok');
$('#catBut').prop("disabled", true);
});
I'm using jQuery 1.9.1 in my project.
I've following HTML :
<button type="button" id="btn_add" class="btn btn-primary">Add</button>
<a class="btn_delete" href="#"><i class="icon-trash"></i></a>
I want to display the same alert message if user clicks on a icon enclosed in anchor tag with class "btn_delete" or click on a button having id "btn_add".
For this I tried following code but it didn't work out for me.
$(document).ready(function() {
$("button#btn_add.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Can someone please help me in this regard please?
If you want any more information regarding the issue I'm facing please let me know.
Thanks in advance.
**Approach #1**
function doSomething(){
//your code
}
$('#btn_add').click(doSomething);
$('.btn_delete').click(doSomething);
**Approach #2**
$("#btn_add,a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
</script>
Your code is quite close to what it should be. Change:
$("button#btn_add.btn_delete")
To:
$("#btn_add,a.btn_delete")
You can use , to have multiple selectors.
$(".btn_delete i,#btn_add").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
You can have both the HTML Tag in the jQuery selector as below:
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Hope this helps!
$(document).ready(function() {
$("#btn_add,.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Additionally to the other answers:
Your current selector will find elements like this:
<button id="btn_add" class="btn_delete">Foo</button>
I'm trying to make my mobile web app appear more responsive. So when you click an icon that's an image i want to use jquery mobile to whilst it's being clicked show a different image (different colour) to make it appear that somethings been done, then when you let go it should change back.
I'm trying the following but it doesn't appear to be firing. Anyone have any tips?
$( document ).ready(function() {
$('.homeAlerts').on( "vmousedown", "a", function() {
console.log("Clicked");
$('#homeAlerts').attr('src','mages/HomeIcons/typeOneClicked_0003_Alerts');
});
$('.homeAlerts').on( "vmouseup", "a", function() {
$('#homeAlerts').attr('src','mages/HomeIcons/typeOne_0003_Alerts.png');
});
});
Markup
<div class="iconL">
<a href="#alerts" class="homeAlerts">
<img id="homeAlerts" src="images/HomeIcons/typeOne_0003_Alerts.png" />
<center class="pullup">Alerts</center>
</a>
</div>
Use the jquery mousedown and mouseup functions instead:
$("img#homeAlerts").mousedown(function(){
$(this).attr("src", "images/HomeIcons/typeOneClicked_0003_Alerts.png")
});
$("img#homeAlerts").mouseup(function(){
$(this).attr("src", "images/HomeIcons/typeOne_0003_Alerts.png")
});
to answer your original question, pretty sure you should be doing:
$('#homeAlerts').on( "vmousedown", "a", function() {
console.log("Clicked");
$(this).attr('src','mages/HomeIcons/typeOneClicked_0003_Alerts');
});
$('#homeAlerts').on( "vmouseup", "a", function() {
$(this).attr('src','mages/HomeIcons/typeOne_0003_Alerts.png');
});
(your selector is trying to select a class, but you have an id on your image)
I've got code so that when you click on a word, it is replaced by another word.
<script>
$(document).ready(function() {
$('.note_text').click(function(){
$(this).remove();
$('#note_div').append('<span class="note_text">new</span>');
// re-applying behaviour code here
});
});
</script>
<div id="note_div">
<span class="note_text">preparing</span>
</div>
I need the appended word to have the same click behaviour. What is the best way to do this?
change
$('.note_text').click(function(){
to
$('.note_text').live('click',function(){
This will cause anything on your page that ever gets the class 'note_text' to have the behaviour set by .live
You should use a .live()help or .delegate()help binding for that purpose.
$(function() {
$('#note_div').delegate('.note_text', 'click', function(e) {
$(e.target).parent().append("<span class='note_text'>new</span>").end().remove();
});
});
Demo: http://www.jsfiddle.net/PkngP/2/
You could rebind the handler:
function handler(){
$(this).remove();
$('#note_div').append("<span class="note_text">new</span>");
$(".note_text").unbind("click");
$('.note_text').click(handler);
}
$(document).ready(function() {
$('.note_text').click(handler);
});