CODEWITHSUNDEEP
javascriptjqueryonclickjquery-events
Umer Hassan
Umer Hassan

Reputation: 1147

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

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);
        }
    });

    });

Upvotes: 0

Views: 637

Answers (4)

Snowmonkey
Snowmonkey

Reputation: 3761

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!

Upvotes: 0

Joe
Joe

Reputation: 28316

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

Upvotes: 2

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

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;
        }
    });
});

Upvotes: 2

Jordan
Jordan

Reputation: 1433

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.

Upvotes: 2

Related Questions