jQuery removeClass(), how it works

Posted by centro on Stack Overflow See other posts from Stack Overflow or by centro
Published on 2010-06-16T08:32:51Z Indexed on 2010/06/16 8:42 UTC
Read the original article Hit count: 134

Filed under:
|
|

I have images on my page. User can add more images onto the page by clicking a button. New images are added asynchronously. Initially, each image on page use a special class to be used when the image is loaded. After the image is loaded, that class is removed. Each image being loaded has the class imageLoading:

<img class="imageLoading" scr="someimage.png">

After those images are loaded, I remove that class (simplified code without details):

 $('img.imageLoading')
         .each(function(){ $(this)
         .load(function(){ $(this)
         .removeClass('imageloading');
                               });});

Visually, I see that style is removed. But when I run the query again:

$('img.imageLoading')

I see via debugging that all images, not just loading ones, are returned, i.e. it works like I didn't remove the class for the images that were already loaded. I had a look into the page source, and I saw that actually in HTML the class was not removed, though removeClass() was called.

Is that behavior by design that all visual changes are applied but the class attribute is not removed in HTML code? If so, how it can be workarounded in this case. Or, probably, I missed something.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about html