Как мне вызывать обработчик событий только один раз, а не каждый раз, когда я нажимаю на элемент? [Дубликат]

В частности, я занимаюсь добавлением многих обработчиков событий при каждом щелчке элемента.

$(".container-items").on('click', '.item', function(event){

    //show modal
    $("#modal-background, #modal").show();

    //get the current item contents and store it in a variable
    var itemContent = $(event.currentTarget).text();

    //populate textarea content with current "itemContent"
    $("#editableText").val(itemContent);

    //when user clicks cancel
    $(".cancel").on("click", function(){
        $("#editableText").val("");
        $("#modal-background, #modal").hide();
        $(".cancel").off("click");
        $(".update").off("click");
    });

    //when user clicks update
    $(".update").on("click", function() {
        var newItemContent = $("#editableText").val();
        $(event.currentTarget).text(newItemContent);
        $("#modal-background, #modal").hide();
        $(".update").off("click");
    });

});

Вот мой jsfiddle: http://jsfiddle.net/3aa4T/

Вот мой HTML:

<div class="add-item-wrapper">
    <div class="textbox">
        <input id="item-value" type="text" />
    </div>
    <div class="add-item-btn">
        <button>Add Item</button>
    </div>
</div>
<div class="error">
    <p>Sorry you have to add something to the list.</p>
</div>
<ul class="container-items">

</ul>

<button id="delete-all">Delete All Items</button>

<div id="modal-background"></div>
<div id="modal">
    <div class="container-wrapper">
        <div class="input-text">
            <textarea id="editableText" rows="4" cols="20"></textarea>
        </div>

        <button class="update">Update</button>
        <button class="cancel">Cancel</button>
    </div>

</div>

Вот мой javascript:

$( document ).ready(function() {

    var value = "";

    //key up on keyboard event handler
    $("#item-value").keyup(function( event ){

        value = $("#item-value").val();

        //if user pressed enter
        if(event.which === 13){
            if( !$(this).val() ){
                $(".error").fadeIn("slow").fadeOut("slow");
            } else {
                $(".container-items").append("<li class='item'>" + value + "</li>");
                $("#item-value").val("");
                value = ""; 
            }
        }
    });

    //Submit item using "Add Item" button
    $(".add-item-btn").click(function(){

        value = $("#item-value").val();

        //check to see if empty string
        if ( value === "" ){
            $(".error").fadeIn("slow").fadeOut("slow");
        } else {
            $(".container-items").append("<li class='item'>" + value + "</li>");
            $("#item-value").val("");
            value = ""; 
        }

    });     

    //Empty all items in "container-items" class
    $("#delete-all").click( function(event){
        $(".container-items").empty();
    });

    //click an item
    $(".container-items").on('click', '.item', function(event){

        //show modal
        $("#modal-background, #modal").show();

        //get the current item contents and store it in a variable
        var itemContent = $(event.currentTarget).text();

        //populate textarea content with current "itemContent"
        $("#editableText").val(itemContent);

        //when user clicks cancel
        $(".cancel").on("click", function(){
            $("#editableText").val("");
            $("#modal-background, #modal").hide();
            $(".cancel").off("click");
            $(".update").off("click");
        });

        //when user clicks update
        $(".update").on("click", function() {
            var newItemContent = $("#editableText").val();
            $(event.currentTarget).text(newItemContent);
            $("#modal-background, #modal").hide();
            $(".update").off("click");
        });

    });

});