jQuery Click event works only once (none of the previous Stack Overflow answers helped)

Question

What I'm trying to do is that when the page loads I'm resetting an image to my desired small size.

If the user clicks on the image later it should enlarge with an animation, I'm done up to this part.

When the user again clicks on that image it should be resized to the size that I assigned after loading the page, I have tried toggle event, but that's not working, toggle just makes my images disappear from the page. So I created an alternate to toggle event by using if and else condition and a flag variable called "small" but the problem is that click event is working only once i.e: If the image is in the small size and I click on it, the image gets enlarged but when I click on it again the click event is fired but it doesn't work, I wish if there is any way that I could make it work with toggle event, otherwise I would like to do it by using if and else condition in click event.

Here's the HTML:

<html>
<head>
    <title></title>
    <script src="jquery-1.10.1.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
      <img src="wordpress.jpg" class="small-Img" id="test"> <br>
          <img src="store.jpg" class="small-Img">

</body>
</html>

Here's the script:

$(document).ready(function() {

         var small;
   $('.small-Img').on('load',function(){


        $(".small-Img").attr('width','200');
          small=Number(1);
    });

    $('.small-Img').on('click',function ()  {
        alert("event fired");
        if(small==1){
        var obj=$(this);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(this).animate({ height: originalHeight,  width: originalWidth   }, 1000, function() { });
            small=Number(0);

        }
        if(small==0){
            $(".small-Img").attr('width','200');
            small=Number(1);
        }
    });

    });

Joe · Accepted Answer · 2013-08-02 17:11:04Z

2

Your code

$(".small-Img").attr('width','200');

sets a width attribute on the image, similar to <img src="url" width="200"> which probably doesn't result in a size change. Try

$('.small-Img').css('width','200px');

or animate the shrinking

 $('.small-Img').animate({  width: '200px'   }, 1000);

You may also get better results making small an attribute of your image rather than a property of the window object

jsfiddle

edited Aug 2, 2013 at 17:11

answered Aug 2, 2013 at 16:53

Joe

29k4 gold badges25 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C Fairweather Over a year ago

I concur. I'll emphasize the use of units. '200px' could definitely be different than '200em', so always label!

unblevable Over a year ago

I made a demo combining Joe's and user2532739's points. jsFiddle

Jordan · Accepted Answer · 2013-08-02 16:53:41Z

2

It sounds like the problem isn't that the event isn't fired multiple times, but that it doesn't enter your if statement. Try making small a boolean variable instead of a number, that way you can avoid all the == vs === messyness

EDIT: Also, you probably want an else if so that it doesn't shrink once it enlarges on each click.

answered Aug 2, 2013 at 16:53

Jordan

1,4338 silver badges14 bronze badges

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-02 16:58:30Z

DEMO

for setting or getting css value we use .css() not .attr()

== only checks the value

=== checks the value and the datatype

$(document).ready(function () {
    var small;
    $('.small-Img').on('load', function () {
        $(".small-Img").css('width', '200'); //changed attr to css
        small = 1;
    });
    $('.small-Img').on('click', function () {
        if (small === 1) { //changed == to ===
            var obj = $(this);
            var originalWidth = obj[0].naturalWidth;
            var originalHeight = obj[0].naturalHeight;
            $(this).animate({
                height: originalHeight,
                width: originalWidth
            }, 1000, function () {});
            small = 0;
        }
        if (small === 0) {  //changed == to ===
            $(".small-Img").css('width', '200'); //changed attr to css
            small = 1;
        }
    });
});

Snowmonkey · Accepted Answer · 2013-08-02 17:29:26Z

How about first making "small" a data-attribute on the image itself? Not a big deal, but a little more convenient (IMHO). The next thing is, when you want to check the second click, you might consider doing an else if rather than just an if. Not sure if it makes a difference, but it is a clear logical differentiation, you can have one or the other -- not both. Third, if you animate the width back down, you might also animate the height, calculated by your small height divided by your original height times the original width. Seems to work, see it here: http://jsfiddle.net/snowMonkey/7nCMF/1/

    $('.small-Img').css('width','200px').data("small", 1);

    $('.small-Img').on('click',function ()  {
      var that=this;
      this.smallWidth = "200px";
      this.smallHeight = (200/$(this)[0].naturalWidth) * $(this)[0].naturalHeight+"px";
      if($(this).data("small")===1 ){

        var obj=$(that);
        var originalWidth=obj[0].naturalWidth;
        var originalHeight=obj[0].naturalHeight;
        $(that).animate({
            height: originalHeight, 
            width: originalWidth  
        }, 1000, function() { });
        $(that).data("small",0);
      } else if($(this).data("small")===0){
          $(that).animate({
              width: that.smallWidth,
              height: that.smallHeight
          }, 1000, function(){}).data("small", 1);
      }
    });

Best of luck!

Collectives™ on Stack Overflow

jQuery Click event works only once (none of the previous Stack Overflow answers helped)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related