Can I click the same gylphicon class and toggle between two functions?-CodePudding

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!

CodePudding user response：

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;
});