Is it possible to click a glyphicon and toggle between two functions? I declared a glyphicon pencil here
var tgtEditLink = document.createElement("a");
tgtEditLink.href = "#";
tgtEditLink.setAttribute('aria-label', 'Edit');
var tgtEdit = document.createElement("i");
tgtEdit.classList.add("glyphicon", "glyphicon-pencil", "white", "tgt-edit");
tgtEdit.title = "Edit";
tgtEditLink.appendChild(tgtEdit);
tgtDragbar.appendChild(tgtEditLink);
users can click this class to enable the "edit" function on my application. I then want to be able to click the same glyphicon and disable said function for another one.
$(document).on('click', '.tgt-edit', function rearrange() {
$('#align-src-col').sortable(sortableOptionsSrc);
return false;
});
The above code will let users edit their text.
I want to be able to click the pencil again, '.tgt-edit', to disable edit, and enable another function. Is this possible in javascript?
Thank you!
You can toggle the class of the element so it no longer has tgt-edit and has the class that the other operation is delegated to.
$(document).on('click', '.tgt-edit', function rearrange() {
$('#align-src-col').sortable(sortableOptionsSrc);
$(this).toggleClass(["tgt-edit", "tgt-other"]);
return false;
});