Jquery Increase and Decrease Zomming is not working

Question

I am using Increase and decrease for zoom image but i want to show decrease when user clicks the image. When I tried this code; decrease is not working ..why?

<script type='text/javascript'>
$(window).load(function(){
    var cell = $('#pok');
    $('.increase').click(function(){
        cell.height(cell.height()+20);
        $(".title").html('<a href="#" class="decrease">Decrease</a>')
    });
    $('.decrease').click(function(){
        cell.height(cell.height()-20);
    });
});
</script>
<img src="/41.jpg"id="pok"class="increase"><span class="title"></span>

score 0 · Answer 1 · answered Jan 09 '14 at 05:05

0

Replace .click with .on

$(window).load(function(){
var cell = $('#pok');
$('.increase').click(function(){
    cell.height(cell.height()+20);
 $(".title").html('<a href="#" class="decrease">Decrease</a>')
});
$('.decrease').on("click",function(){
    cell.height(cell.height()-20);
});

 });

Documentation from the on() function

This method is a shortcut for .bind('click', handler)

answered Jan 09 '14 at 05:05

Harshit Tailor

3,261
6
27
40

that should be `on('click',` – Adil Shaikh Jan 09 '14 at 05:08

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Use on() for dynamically created elements like,

$(document).on('click','.decrease',function () {
    cell.height(cell.height() - 20);
});

Also Use $(function(){ instead of $(window).load(){ see difference

Working Demo

edited May 23 '17 at 11:49

Community

1
1

answered Jan 09 '14 at 05:07

Rohan Kumar

40,431
11
76
106

score 0 · Answer 3 · answered Jan 09 '14 at 05:09

0

The problem you are facing is that when you select elements with the class .decrease you get 0 elements because you attach it just when you click on the increase.

Change the ".decrease" selector for ".title" and it will work

answered Jan 09 '14 at 05:09

Mardie

1,663
17
27

score 0 · Answer 4 · answered Jan 09 '14 at 05:11

Try this:

<script type='text/javascript'>
    jQuery(document).ready(function($){
        $('.increase').click(function(){
            var cell = $(this);
            cell.height(cell.height()+20);
            $(this).find(".title").html('<a href="#" class="decrease">Decrease</a>');
        });
        $('.decrease').click(function(){
            var cell = $(this).parent().find('.increase');
            cell.height(cell.height()-20);
        });
    });
</script>

<img src="/41.jpg"id="pok"class="increase"><span class="title"></span>

Jquery Increase and Decrease Zomming is not working

4 Answers4