.css() not changing until second click - using shared class selector

Question

I am using a lightbox triggered by many elements. I need to alter the style (light to dark) when one unique element is clicked so I added an id to that element. I then force the css default on each click of lightbox but added an override on the #saved id. I am still learning jquery. Assuming I may need to unload that first click function.

What happens is that if #saved is clicked it is always ignored however it works fine the second time forward. Even clicking from .lightbox to #saved elements back and forth triggers properly. Addditionally if a .lightbox element is clicked first, then #saved - #saved lunches with the correct css. In conclusion the only time this fails on the first click is if #saved is the first element with a class of .lightbox that is clicked.

HTML:

Typical
<a href="/" class="lightbox">click me</a>

Unique
<a href="/" class="lightbox" id="saved">click me too</a>

JavaScript:

$(document).ready(function() {
var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

$('.lightbox').lightbox().click(function(){$(cssLB).css('background','#FFF url(/inc/img/loading.gif) no-repeat center center;')});

$('#saved').click(function(){
  $(cssLB).css('background','#000 url(/inc/img/loading-dark.gif)');
});

For debugging purposes, add an alert() statement to your $("#saved").click() function. I want to see if that fires on your first click. I remember having this problem years ago and it had something to do with initilization but I can't remember right off hand. I'll dig in the site where I had the problem to see if I can figure it out. Post a response to see if the alert fires on the first click. — Matt Moore
– Matt Moore, Commented Dec 29, 2011 at 15:46
It is triggered upon first click however no css change until second click. I am having similar issues with solution below but still working on it. — chrisrth
– chrisrth, Commented Dec 29, 2011 at 16:23
Just to clarify, you're still getting this problem from Gaby's solution below? — Matt Moore
– Matt Moore, Commented Dec 29, 2011 at 16:29
yes. if you look at cssLB it is actually multiple classes stacked just as they are in the css file. There are 3 classes (note the commas). I think Gaby's solution may work if I add/remove once per each class — chrisrth
– chrisrth, Commented Dec 29, 2011 at 16:52
to clarify Gaby's answer does not change the class on click. no error, the lightbox still fires but no class change. — chrisrth
– chrisrth, Commented Dec 29, 2011 at 17:02

Gabriele Petrioli · Accepted Answer · 2011-12-29 17:53:11Z

To avoid situations where you cannot determine the order the event handlers are called, you should do a single bind and identify the best route from there..

Also you should use classes instead of manually changing the CSS.

CSS

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center;}
.unique{background: #000 url(/inc/img/loading-dark.gif);}

jQuery

$(document).ready(function() {
    var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

    $('.lightbox').lightbox().click(function(){
        if ( $(this).is('#saved') ){
            $(cssLB).removeClass('typical').addClass('unique');
        } else {
            $(cssLB).removeClass('unique').addClass('typical');
        }

    });
});

Additionally, if you have multiple elements that are saved then you should use a class instead of an id, as those should be unique..

Update

A note : the second class in your cssLB variable includes the third class. So you might want to remove the 3rd one.. (for performance).

CSS precedence : If these classes have the background property defined, then you will have to increase the specificity of the typical and unique classes or apply the !important declaration to enforce them.

Using !important

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center!important;}
.unique{background: #000 url(/inc/img/loading-dark.gif)!important;}

Using increased specificity

.jquery-lightbox-mode-html .jquery-lightbox-background .typical,
.jquery-lightbox-loading .typical,
.jquery-lightbox-mode-html .jquery-lightbox-loading .typical {
    background: #FFF url(/inc/img/loading.gif) no-repeat center center;
}
.jquery-lightbox-mode-html .jquery-lightbox-background .unique,
.jquery-lightbox-loading .unique,
.jquery-lightbox-mode-html .jquery-lightbox-loading .unique{
    background: #000 url(/inc/img/loading-dark.gif);
}

Collectives™ on Stack Overflow

.css() not changing until second click - using shared class selector

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related