the following snippet fire first time click .profile-tabs ul li a element(s) , not again. if put switchproftabs() function directly script (instead of calling it) works expected. i'm confused why is. answers i've seen similar questions it's event delegation, think i'm using method, no? appreciated.
//detects whether form has been changed or not // set boolean flag variable var form_changed = false; $('#profile-form').on('input change', 'input, select, textarea', function(){ form_changed = true; }); // switches tabs on profile page $('.profile-tabs ul li a').on('click', function() { if ($('.tabcontent.active').attr('id') == 'profile') { if(form_changed){ var conf = confirm('profile has not been saved! press cancel save before continuing'); if (conf){ switchproftabs(this); } else { return false; } } else { switchproftabs(this); } } return false; }); function switchproftabs(clicked) { $('.profile-tabs ul li a.active').removeclass('active'); $(clicked).addclass('active'); $('.tabcontent').hide(); var tab = $(clicked).attr('data-tab'); $('.tabcontent.active').removeclass('active'); $('#'+tab).addclass('active').show(); }
