jQuery plugin doesn't work when called twice

Question

I know this a problem with the way I have coded the plugin for dealing with multiple instances. I'm pretty sure at least one of my variables is being overwritten by each subsequent call of the plugin. Anyway, here's the plugin code:

$.fn.extend({
dependsOn: function( $claimer ){
    $dependent = $(this);
    $claimer.change(function(){
        alert( $dependent.attr('id') );
        var $selected = $('option:selected', this);
        var pk = $selected.attr('class');

        $dependent.removeAttr('disabled');
        $dependent.find('option').each(function(){
            $hiddenOpts = $dependent.parent().find('.hiddenOptions');
            $hiddenOpts.append( $(this) );
            $hiddenOpts.find('option').each(function(){
                if( $(this).attr('ref') == pk || $(this).hasClass('empty') )
                    $dependent.append( $(this) );
            });
        });
    });
}
});

When I call $('.something').dependsOn( $('.somethingElse') );, it works fine, but if I call it again on two other items, the $dependent variable gets set to THAT element.

The point of the plugin is to keep select boxes disabled until a previous select box is changed. If I have three select boxes in a row, and I want the first one enabled, the second one dependent on the first, and the third dependent on the second, I'd call $(second).dependsOn( $(first) ), and $(third).dependsOn( $(second) ), so changing the first would then enable the second but not the third, and changing the second would then enable the third.

But with the current code, changing the first enables the third, but not the second (like I said, I think it's because $dependent is being overwritten and set to the third thing after calling dependsOn twice).

If that's not clear, let me know.

100% perfect model of a question. Clear description of what you want and what's going wrong, and the code used! Brilliant. If only there was a jsfiddle.... — mowwwalker
– mowwwalker, Commented Jan 26, 2012 at 3:33

Gonzalo Larralde · Accepted Answer · 2012-01-26 03:39:57Z

5

That's because you're not defining a new variable in the scope of dependsOf (which is done using var $dependent = blah). Instead, you're setting the value of $(this) to a global version of $dependent.

That's the reason why it's being replaced.

Good luck :)

answered Jan 26, 2012 at 3:39

Gonzalo Larralde

3,5411 gold badge28 silver badges30 bronze badges

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

1 Comment

Jake Over a year ago

Awesome, that was the problem. Thanks!

Daniel Mendel · Accepted Answer · 2012-01-26 03:43:17Z

1

The way you're declaring $dependant is making it a global variable, so the next time the function is called it sets the same global $dependant to the new value. Try:

var $dependant = $(this);

answered Jan 26, 2012 at 3:43

Daniel Mendel

10k1 gold badge27 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery plugin doesn't work when called twice

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related