Removing an onclick function

Question

I'm currently playing around with creating a new image slider for a project, but had a question. The task is to have an image displayed on page that will open the full size onclick. However, I'd like to make it so the function goes away and the image returns to the original state onclick again.

Here's my code:

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <img src="//path" onClick="full()" id="image" />
    <script type="text/javascript">
        function full() {
            $(function () {
                $('#image').on('click', function () {
                    $(this).width(1000);
                });
            }); 
        }
    </script>
</body>   
</html>

The image opens in a larger state which is good, but how would I implement a second onclick function to take away the first?

Thanks for the help!

Do you want to remove the event listenner or scale down the image on second click? — phenxd
– phenxd, Commented Feb 12, 2016 at 19:00
I'd like to return the image to how it was, so I'm guessing that would be removing the event listener — A. Bunker
– A. Bunker, Commented Feb 12, 2016 at 19:02
Removing the event listener wouldn't revert what you did to the image. It just removes the event from triggering your callback function again — Patrick Evans
– Patrick Evans, Commented Feb 12, 2016 at 19:03
FYI, there is no need to have $(function () { ... }) inside the click handler. At the moment the function is executed, the DOM is already loaded. — Felix Kling
– Felix Kling, Commented Feb 12, 2016 at 19:03
Patrick, would you have any suggestions how I go about this then? — A. Bunker
– A. Bunker, Commented Feb 12, 2016 at 19:04

John Slegers · Accepted Answer · 2016-02-12 19:30:19Z

1

To take an event previously assigned use

$('#image').off('click')

To scale back the image, use

var size = 0;
function full() {
    $(function () {
        $('#image').on('click', function () {
            if (size === 0) {
                size = $(this).width();
                $(this).width(1000);
            } else {
                $(this).width(size);
                size = 0;                     
            }
        });
    }); 
}

edited Feb 12, 2016 at 19:30

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

answered Feb 12, 2016 at 19:01

MaxZoom

7,7635 gold badges30 silver badges45 bronze badges

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

1 Comment

A. Bunker Over a year ago

That's exactly it! Thank you so much! I figured I'd need an else statement, but the way I was writing it just wouldn't work to my benefit. You're fantastic, thank you sir.

Ibrahim Khan · Accepted Answer · 2016-02-12 19:04:36Z

0

If width is 1000px then remove it otherwise set it to 1000 like following.

<img src="//path" id="image" />

<script type="text/javascript">
    $('#image').on('click', function () {
        if ($(this).width() == '1000')
            $(this).width('');
        else
            $(this).width(1000);
    });
</script>

answered Feb 12, 2016 at 19:04

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

Comments

Shomz · Accepted Answer · 2016-02-12 19:12:52Z

You don't need to remove the onclick listener, but you need to fix a few things. You have an inline onclick callback which was actually calling the full function that attaches a new click listener over and over again, eventually causing the click handler to be called 2^n times.

You can just keep the one in the code, and inside it check the current width of the image in order to choose what happens when you click it (assuming 50px is the starting width):

$('#image').on('click', function() {
  $(this).width($(this).width() != 1000 ? 1000 : 50);
});

img {
  width: 50px;
  transition: width 0.2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.planwallpaper.com/static/images/518084-background-hd.jpg"  id="image" />

John Slegers · Accepted Answer · 2016-02-12 19:29:38Z

0

Use a class & toggleClass

function full() {
    $(function () {
        $('#image').on('click', function () {
            $(this).toggleClass('changeWidth');
        });
    }); 
}

Example

edited Feb 12, 2016 at 19:29

John Slegers

47.4k23 gold badges205 silver badges173 bronze badges

answered Feb 12, 2016 at 19:09

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

What you're literally asking for :

The code below shows you how to do what you're literally asking for :

After the first click, You change the width to 1000, you remove the inital click handler and add a new click handler to reset the width
After the second click, you reset the with and remove the second click handler
Any clicks after the second click don't do anything anymore

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                $(this)
                    .width(1000)
                    .off('click')
                    .on('click', function() {
                        $(this)
                            .width('')
                            .off('click');
                });
            });
        }); 
    </script>
</body>   
</html>

See also this Fiddle for a working demo.

What you probably want :

What you probably want, is just a single click handler that toggles the width of your image.

The best way to do that, would be something like this :

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                var me = $(this);
                me.width(me.width() !== 1000 ? 1000 : '');
            });
        });
    </script>
</body>   
</html>

See also this Fiddle for a working demo.

Collectives™ on Stack Overflow

Removing an onclick function

5 Answers 5

1 Comment

Comments

Comments

Comments

What you're literally asking for :

What you probably want :

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

What you're literally asking for :

What you probably want :

Comments

Your Answer

Sign up or log in

Post as a guest

Related