I'm trying to toggle two classes without using toggleClass function in query. Here's the element in which class is to be defined.
<a class="btn btn-floating waves-effect waves-light blue show-editor"><i class="material-icons">add</i></a>
Initially, I have the class show-editor. On clicking this anchor tag, I'm initiating tinyMce editor that is binded to a textarea.
$('.show-editor').on('click', function(e){
e.preventDefault();
console.log('show-editor class clicked');
tinymce.init({
selector: '#comment',
height: 200,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
$('.show-editor').addClass('remove-editor');
$('.remove-editor').removeClass('show-editor');
});
$('.remove-editor').on('click', function(e){
e.preventDefault();
console.log('removed-editor class clicked');
tinyMCE.remove();
$('.remove-editor').addClass('show-editor');
$('.show-editor').removeClass('remove-editor');
});
The above code works perfectly well for the first click. tinyMCE editor initiates and I get a message "show-editor class clicked". I see that show-editor class gets remove and remove-editor class adds to the element by inspecting the DOM, but when I click the anchor tag again, the editor still remains and I get the same message again in console. What wrong am I doing here?
