JQuery plugin does not work when called twice

Question

I know this is a problem with the way I encoded the plugin for working with multiple instances. I am sure that at least one of my variables is overwritten by each subsequent call to the plugin. Anyway, here is 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 elements, the $ variable depends on the THAT element.

The plugin's point is to prohibit the selection lock until the previous selection field has been changed. If I have three selection lines in a row, and I want the first to be included, the second depended on the first, and the third depended on the second, I would call $(second).dependsOn( $(first) ) and $(third).dependsOn( $(second) ) , so the change will first include the second, but not the third, and then change the second, then turn on the third.

But with the current code, changing the first allows the third, but not the second (as I said, I think because $ depends is overwritten and set to the third, after calling dependOn twice).

If this is unclear, let me know.

Answer 1

This is because you are not defining a new variable in the dependsOf (which is executed using var $dependent = blah ). Instead, you set the value of $ (this) to the global version of $dependent .

This is the reason for replacing it.

Good luck :)

Answer 2

The way you declare $dependant makes it a global variable, so the next time you call the function, it sets the same global value of $dependant to a new value. Try:

var $dependant = $(this);