これを関数に渡すと、クリックされたすべての要素が変更されます

Question

シェイプがキャンバスに追加され、クリック機能が各アイテムに割り当てられます。私は1つの項目をクリックすると、そのシェイプ

function place(id, top, leftpx, width, height, color) { 
    var dropped; 

    dropped.attr('s_id', id) 
    .appendTo('.xy') 
    .data({ 
     'posleft': leftpx, 
     'postop': top, 
     'width': width, 
     'height': height, 
     'color': color 
    }) 
    .css({ 
     top: top + "px", 
     left: leftpx + "px", 
     position: "absolute", 
     width: width, 
     height: height 
    }); 

    dropped.resizable({ 
    containment: '.xyz', 
    handles: 'all', 
    stop: function(event, ui) { 
     $(this).data('width', ui.size.width); 
     $(this).data('height', ui.size.height); 
    } 
    }); 

    dropped.click(function(e) { 
    var id = $(this).attr("shelf_id"); // gives the correct id 
    edit($(this)); 
    }); 

を編集するためにユーザを可能に編集ウィンドウが現れクリックで、それは正確に色を変更しますが、できるだけ早く私は二番目をクリックすると、それはまたの色を変更します前にクリックされたアイテム対応する機能は次のとおりです。

function edit(item) { 
    //edit window shows up 

    $("#editDataForm").submit(function(e) { 

    var id_color = $("#colorSelect option:selected").val(); 

    if (item.data('color') != id_color) { 
     switch (id_color) { 
     case '1': 
      item.css("background-color", "yellowgreen"); 
      item.data('color', id_color); 
      break; 
     case '2': 
      item.css("background-color", "indianred"); 
      item.data('color', id_color); 
      break; 
     default: 
      break; 
     } 
    } 
    e.preventDefault(); 
    }); 
} 

私の推論での間違いがある箇所を教えてください。私はちょうどそれをひっくり返す

Answer 1

edit(item)を呼び出すたびに、submit()ハンドラをフォームに追加します。フォームを送信すると、すべてのハンドラ関数が実行され、editを呼び出したときにクリックされたアイテムの色がそれぞれ変更されます。

最後のイベントのみに影響を与えたい場合は、以前のイベントハンドラを削除する必要があります。 .off()メソッドでこれを行うことができます。

function edit(item) { 
    //edit window shows up 

    $("#editDataForm").off("submit").submit(function(e) { 

    var id_color = $("#colorSelect option:selected").val(); 

    if (item.data('color') != id_color) { 
     switch (id_color) { 
     case '1': 
      item.css("background-color", "yellowgreen"); 
      item.data('color', id_color); 
      break; 
     case '2': 
      item.css("background-color", "indianred"); 
      item.data('color', id_color); 
      break; 
     default: 
      break; 
     } 
    } 
    e.preventDefault(); 
    }); 
}