I'm trying to add a class using toggleClass to a label when the label is clicked. The trouble I am having is that when I put a checkbox in it, the class only gets added when you click on the checkbox itself and not the text. How can I make it so that it adds the class when the text is clicked as well?
http://jsfiddle.net/p8erw/1/
Here is the code I'm using
$("label").click(function () {
$(this).toggleClass("highlight");
});
Instead of binding to the labels click event, try binding to the checkbox's change event:
$("input[type=checkbox]").on('change', function () {
$(this).parent().toggleClass("highlight");
});
http://jsfiddle.net/p8erw/4/
Try changing click() function to on change event. :)
$("label").on('change',function() {
$(this).toggleClass("highlight");
});
Related
I'm trying to update a modal & video attributes on button click.
It works well but the problem is that it only apply this when i click on the first button ( first element with the class videoBtn ), i want it to be applied on all other buttons with the same class
here is my code
$(".videoBtn").click(function(){
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
});
You are not using value of currently clicked element, but first with class, you should use $this instead of $('.videoBtn')
$(".videoBtn").click(function(){
$("#video").attr('src',$(this).data('src'));
$(".modal").attr('id', $(this).data('target').substring(1));
});
$(".videoBtn").each(function(){
$(this).on('click', function() {
$("#video").attr('src',$(".videoBtn").data('src'));
$(".modal").attr('id', $(".videoBtn").data('target').substring(1));
})
})
I've click event bind to a class called ".reportfile" as follow.
$('body').on('click','.reportfile',function(e){
e.preventDefault();
e.stopPropagation();
var id=$(this).attr('id');
if(!$(this).hasClass('brc')) {
// Perform some action here.
}
});
Now I'm creating LI element dynamically with ".reportfile" class. Like this,
var inLi=$('<li>');
inLi.addClass('reportfile');
$(containerdiv).append(inLi);
Now when I try to click on the dynamic generated LI elements it only works on second click.
https://jsfiddle.net/mt7km8bz/
There is input box on the top of the UL to filter the list. This is where I'm creating new LI dynamically. LI element in filtered list has to be clicked twice to get it working.
The problem was the focus on the input box, on first click input box still have the focus so the click event on list doesn't trigger.
So on the first click it losses focus on the input box and on second click event get triggered.
Changes to following worked for me.
$('body').on('keyup','.searchable',function(){
// Some code
});
I guess jQuery click event works only after second click because the focus of the input.So I did a fool way that is trigger LostFocus Event using timer.
setTimeout(function(){
$('.searchable').blur();
},1500);
This is the code...
https://jsfiddle.net/2hkn2jpk/
try this.....
$(document).on('click','.reportfile',function(e){
var id=$('.reportfile').attr('id');
if(!$('.reportfile').hasClass('brc')) {
// Perform some action here.
}
});
change this to keypress , Its working.
I cheked in fiddle.
Jsfiddle
$( ".searchable" ).keypress(function(){
$('.ul2').html('');
var value=$(this).val().trim().toLowerCase();
if(value=="") {
$('.ul1').show();
$('.ul2').hide();
} else {
$('.ul1').hide();
$('.ul2').show();
}
$('.ul1').find('.reportfile').each(function(index){
var title=$(this).attr('title').toLowerCase();
if(title.indexOf(value)>=0) {
var LIin=$("<li>");
LIin.addClass('reportfile');
LIin.text(title);
$('.ul2').append(LIin);
}
});
});
I have a follow up question to this: Add and remove a class on click using jQuery?
I'm able to add a class to a specific li element using this snipped by Jamie Taylor:
$('.team').on('click', 'li', function() {
$('.team li#member').removeClass('more');
$(this).addClass('more');
});
I'd like to remove the Class .more again, by clicking a toggle element inside the li-item.
My jQuery Snippet which doesn't work:
$('.toggle-x').click(function () {
$('.team li#member').removeClass('more');
})
Thanks for the help!
In your code, it will remove the class form only one element with id member. If you want to remove the class from all the li elements, use like this,
$('.team li.more').removeClass('more');
try this
$(".innerLiContent").click(function(){
$(this).parentsUntil( "li" ).removeClass('more');
});
Your problem is because when you click on an element X inside the <li /> the element fires the click event, and if you don't use event.stopPropagation() the <li /> will also fire the click event and the class will be added again.
Try this:
$('.toggle-x').click(function (e) {
$('.team li#member').removeClass('more');
e.stopPropagation();
})
It should work if that's your problem.
This is my Fiddle JsFiddle
$(function() {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').removeAttr("readonly").focus();
});
$('.form-control:focus').blur(function() {
$(this).addAttr("readonly");
});
});
What I am trying to do?
I am trying to create a dynamically editable form.It should have
When someone click on edit icon, the corresponding Input field should get focussed and become editable. (I completed this part).
Next i want is when an element is in focus state and it looses focus then i want to add readonly attribute again to that element. This part in not working. can somebody explain me why. and give a solution for it
EDIT:
In the later part i was trying alert("some msg") to check whether the event is getting fired or not. while posting i just replaced it with addAttr. it was a typo
You could use instead:
--DEMO--
$(function () {
$('.glyphicon-edit').click(function () {
$(this).parent().find('.form-control').prop("readonly", false).focus().one('blur', function () {
$(this).prop('readonly', true);
});
});
});
There is no addAttr() function. The setter for attr looks like this:
$('.form-control').blur(function() {
$(this).attr("readonly", true);
});
Also, the :focus psuedo selector here is redundant, as to fire the blur event the element has to have focus in the first place.
I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code
$(".btn").each(function ()
{
$(this).click(function () {
$(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");
});
});
<div class="course-Search-tabs">
A
B
C
D
</div>
You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.
$(".btn").click(function () {
if($(this).hasClass("course-btn-tab-selected"))
$(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
});
Edit: You can improve this by hold the last selected element and changing it class if it suits you.
previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {
previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
previouslyClicked = $(this);
});
Wrong usage of $.each()
Use this way:
$(".btn").click(function () {
$(".btn").removeClass("course-btn-tab-selected");
$(this).addClass("course-btn-tab-selected");
});
Should do the trick:
$(".btn").click(function () {
$(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");
});
There is another way:
$(".btn").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).addClass("course-btn-tab-selected");
});
First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.
Next find the previously selected button, remove the selected class and add the regular class.
Finally remove the regular class from the clicked button and add the selected class.
$('.btn').bind('click', function () {
var previouslySelectedButton = $('.course-btn-tab-selected');
var selectedButton = $(this);
if (previouslySelectedButton)
previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');
selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});
Alternatively here is a working example using your HTML: jsFiddle