The following snippet will only fire the first time I click the .profile-tabs ul li a element(s) and not again. If I put the switchProfTabs() function directly into the script (instead of calling it) it works as expected. I'm confused why this is. All the answers I've seen to similar questions say it's about event delegation, but I think I'm already using that method, no? Any help appreciated.
//Detects whether the form has been changed or not
// Set the boolean flag variable
var form_changed = false;
$('#profile-form').on('input change', 'input, select, textarea', function(){
form_changed = true;
});
// Switches the tabs on the 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 to save before continuing');
if (conf){
switchProfTabs(this);
} else {
retu false;
}
} else {
switchProfTabs(this);
}
}
retu 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();
}
