jQuery reset one() method, after being called

I'm trying to reset one() after its been executed.

Here is my html:

<textarea name="comment"> Write comment...</textarea>
<div id="buttons" style="display:none">
  <button id="submit">Submit</button>
  <button id="cancel"></button>
</div>

Here is the first part that transforms text area into wysiwyg:

$('textarea[name=comment]').one("click", function() {
    $(this).editor();
    $("#buttons").show();   
});

and here is the part that resets all:

$('#cancel').click(function() {
    $('textarea[name=comment]').editor('destroy');
    $("#buttons").hide();   
});

First part works fine, textarea gets converted into editor, and buttons are visible, now second part, removes editor and hides buttons, but clicking again on textarea, nothing nothing happens due to one().

Answers 1

  • Don't use .one() if you want it to fire multiple times. If you want the behavior to be conditional, write that explicitly into the code.

    $('textarea[name=comment]').on("click", function() {
        var editor_disabled = $(this).data("editor-disabled");
        if (!editor_disabled) {
            $(this).editor();
            $("#buttons").show();
            $(this).data("editor-disabled", true); // disable until we cancel
        }
    });
    
    $('#cancel').click(function() {
        $('textarea[name=comment]').editor('destroy');
        $("#buttons").hide();
        $('textarea[name=comment]').data("editor-disabled", false); // re-enable
    });
    

Related Articles