javascript - 如何只调用一次事件处理程序，而不是每次单击项目时？

Question

特别是我关心每次单击项目时添加到许多事件处理程序。

$(".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");
        });

    });

});

Answer 1

现场演示

_{请注意，我还更改了一些 HTML 和 CSS，基本上我将模式添加到它的背景容器中。}

$(function() {

    var $itemValue      = $('#item-value'),        // Cache your elements!
        $modal          = $("#modal-background"),
        $editable       = $("#editableText"),
        $itemsContainer = $(".container-items"),
        $selected;        // Will keep track of the active (selected) item

    $itemValue.keyup(function(e) {
        if(e.which===13) $(".add-item-btn").click();
    });

    $(".add-item-btn").click(function() {
        var value = $.trim( $itemValue.val() );
        if (!value){
            $(".error").fadeIn("slow").delay(800).fadeOut("slow");
        } else {
            $itemsContainer.append("<li class='item'>" + value + "</li>");
            $itemValue.val("");
        }
    });     

    $("#delete-all").click( function(e) {
        $itemsContainer.empty();
    });

    $itemsContainer.on('click', '.item', function(e) {
        $selected = $(this);     
        $modal.show();
        $editable.val( $selected.text() );
    });

    $(".cancel, .update").on("click", function(){
        $modal.hide();
        return this.className == 'update' ? // clicked '.update'?
          $selected.text($editable.val()) : // yes
          $editable.val("");                // no
    });

});

Answer 2

我会将“添加”部分设为表单......并且只需使用表单的提交而不是 .keyup 和按钮 .click 处理程序。我做了一个 jsfiddle - http://jsfiddle.net/3aa4T/1/ ，关键是

$("#add-item-form").submit(function(e){
    e.preventDefault();