Javascript onclick event firing for id but not for class

Question

I'm fairly new to Javascript, and am trying to get an 'on click enlarge' kind of effect, where clicking on the enlarged image reduces it again. The enlarging happens by replacing the thumbnail by the original image. I also want to get a slideshow using images from my database later on.

In order to do that, I made a test where I replace the id which indicates enlarging is possible by a class and I also use a global variable so that I can keep a track of the url I'm using. Not sure this is the best practice but I haven't found a better solution.

The first part works fine, my image gets changed no problem, values are also updated according to the 'alert' statement. However, the second part, the one with the class never triggers.

What am I doing wrong (apart from the very likely numerous bad practices) ?

If instead of changing the class I change the id directly (replacing .image_enlarged by #image_enlarged, etc.), it seems to call the first function, the one with the id, yet outputs the updated id, which is rather confusing.

var old_url = "";

$(function(){

   $('#imageid').on('click', function ()
        {       
        if($(this).attr('class')!='image_enlarged'){
            old_url = $(this).attr('src');
            var new_url =  removeURLPart($(this).attr('src'));
            $(this).attr('src',new_url); //image does enlarge
            $(this).attr('class',"image_enlarged");
            $(this).attr('id',"");
            alert($(this).attr('class')); //returns updated class
            }
        });

   $('.image_enlarged').on('click', function (){
       alert(1); //never triggered
       $(this).attr('src',old_url);
       $(this).attr('class',"");
       $(this).attr('id',"imageid");
   });
});

function removeURLPart(e){
   var tmp = e;
       var tmp1 = tmp.replace('thumbnails/thumbnails_small/','');
       var tmp2 = tmp1.replace('thumbnails/thumbnails_medium/',''); 
       var tmp3 = tmp2.replace('thumbnails/thumbnails_large/','');

   return tmp3;
} 

As for the html, it's really simple :

<figure>
   <img src = "http://localhost/Project/test/thumbnails/thumbnails_small/image.jpg" id="imageid" />
   <figcaption>Test + Price thing</figcaption>
</figure>

<script>
   document.write('<script src="js/jquery-1.11.1.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://localhost/Project/js/onclickenlarge.js"></script>

Answer 1

From the API: http://api.jquery.com/on/

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object.

When you do $('.image_enlarged').on(...) there is no element with that class. Therefore, the function is not registered in any element.

If you want to do so, then you have to register the event after changing the class.

Here's an example based on your code: http://jsfiddle.net/8401mLf4/

But this registers the event multiple times (every time you click) and it would be wrong. So I would do something like:

$('#imageid').on('click', function () {
    if (!$(this).hasClass('image_enlarged')) {
      /* enlarge */
    } else {
      /* restore */
    }
}

JSfiddle: http://jsfiddle.net/8401mLf4/2/

Answer 2

Try using:

addClass('image-enlarged')

instead of:

.attr('class',"image_enlarged");

the best way to do this would be to have a small-image class and a large image class that would contain the desired css for both and then use addClass() and removeClass depending on which you wanted to show.