传递给函数时，JavaScript变量不保持期望值

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.

Answer 1

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/

Answer 2

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'.

Answer 3

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