Javascript scope -- var vs global -
for currentunknownbox
, if use "var" expected functionality not work expected (currentunknownbox becomes first element clicked). if remove var, works expected. assuming has global scope. explain me?
jquery(".box.unknown").live('click',function() { var currentunknownbox = this; //if not on mobile, use jquery ui dialog if (!drupal.settings.is_mobile) { jquery("#letter-input-dialog").dialog(); jquery('#letter_input_form').submit(function() { var letter = jquery("#letter_input").val(); jquery("#letter-input-dialog").dialog('close'); jquery("#letter_input").val(''); that.validateandsaveletter(currentunknownbox, letter); //do not let form submit return false; }); } else { var letter = prompt('please enter letter use in guess'); that.validateandsaveletter(that.currentunknownbox, letter); } });
edit: problem re-declaring submit function every time.
the problem every time 1 of these clicked, you're adding new submit event handler form. first 1 fire first. when don't declare var, you're overwriting variable that first handler looking at. mistake adding new handler every time. so:
var currentunknownbox; jquery('#letter_input_form').submit(function() { var letter = jquery("#letter_input").val(); jquery("#letter-input-dialog").dialog('close'); jquery("#letter_input").val(''); that.validateandsaveletter(currentunknownbox, letter); //do not let form submit return false; }); jquery("#letter-input-dialog").dialog({autoopen: false}); jquery(".box.unknown").live('click',function(){ currentunknownbox = this; //if not on mobile, use jquery ui dialog if (!drupal.settings.is_mobile) { jquery("#letter-input-dialog").dialog('open'); } else { var letter = prompt('please enter letter use in guess'); that.validateandsaveletter(currentunknownbox, letter); } });
incidentally, .live
deprecated. should use .on
instead.
Comments
Post a Comment