JavaScript variable not holding expected value when passed into function

Question

I'm using some jQuery to let users manipulate images. The user should be able to double-click an image to select it, then click on some buttons which appear below for resizing or flipping the image.

The image gets passed to the image_editor function like this:

$('section img').dblclick(function () {
    item_editor(this);
});

Then the item_editor function looks like this:

var item_editor = function (activeItem) {

    var $activeItem = $(activeItem);

    // Show border around current activeItem
    $('.activeItem').removeClass('activeItem');
    $activeItem.addClass('activeItem');

    // Flip the selected image when the button's clicked
    $('div#flip').click(function () {
        $activeItem.toggleClass('flipped');
    });

}

I put this up into a jsFiddle here: http://jsfiddle.net/sarahg/6sE5F/30/

The problem I'm having here is that the Flip button works the first time you use it, but if you select a different image and try to flip that one, everything which had already been flipped flips again. The activeItem variable is not what I'd imagine it should be.

I did some searching around and I think this has to do with JavaScript closures, but I haven't been able to understand them enough to make my code work.

Blender · Accepted Answer · 2013-05-20 16:10:01Z

2

jQuery event listeners don't get replaced. They just get stacked on top of one another and all execute when they catch your click event, which is what happens in your case. If you double click on an image an even number of times, it gets flipped an even number of twice, so it looks like nothing happened to it.

Add the click logic outside of the event handler:

$('section img').dblclick(function() {
    item_editor(this);
});

var item_editor = function(activeItem) {
    $('.activeItem').removeClass('activeItem');
    $(activeItem).addClass('activeItem');
}

$('div#flip').click(function () {
    $('.activeItem').toggleClass('flipped');
});

Demo: http://jsfiddle.net/6sE5F/33/

answered May 20, 2013 at 16:10

Blender

300k55 gold badges462 silver badges511 bronze badges

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

Comments

A. Wolff · Accepted Answer · 2013-05-20 16:09:56Z

1

You should not nesting click handler:

DEMO

$('section img').dblclick(function () {
    item_editor(this);
});

var item_editor = function (activeItem) {

    var $activeItem = $(activeItem);

    // Show border around current activeItem
    $('.activeItem').removeClass('activeItem');
    $activeItem.addClass('activeItem');

    // Flip the selected image when the button's clicked


}

 $('div#flip').click(function () {
       $('.activeItem').toggleClass('flipped');
    });

answered May 20, 2013 at 16:09

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Pointy · Accepted Answer · 2013-05-20 16:30:10Z

1

You need to unbind the previous "click" handler before binding a new one http://jsfiddle.net/6sE5F/31/

  $('div#flip').unbind('click').click(function () {
    // ...

Successive requests to jQuery that it bind a handler for a particular event simply add more handlers. The old ones don't go away unless you make them go away.

In case there might be other "click" handlers bound to that element, you can use a qualifier to tell jQuery that you're only talking about a particular kind of "click" handler:

  $('#flip').unbind('click.kitten-flipper').on('click.kitten-flipper', function() {
    // ...

The ".something" qualifier doesn't affect the event handling process, but it identifies these click handlers as being related. Other click handlers bound without a qualifier or with different qualifiers won't be affected by the call to `.unbind'.

edited May 20, 2013 at 16:30

answered May 20, 2013 at 16:07

Pointy

415k62 gold badges600 silver badges631 bronze badges

1 Comment

Ian Over a year ago

Probably shouldn't unbind all click handlers. Make the binding to a specific function, then unbind that specific handler

Collectives™ on Stack Overflow

JavaScript variable not holding expected value when passed into function

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related