jqueryインライン編集の問題：保存してもまだクリックしてもクリックしない

Question

jqueryでインライン編集に関する問題が発生しています。 私は、2つのセルのデータで動的に生成されたテーブルを持っています。 1つのセルにはアクティビティの名前が含まれ、他のセルには空ですが、アクティビティに割り当てられた色を示す背景色があります。

今、インライン編集したいです。名前の部分については、うまくいきます。名前をクリックすると、入力ボックスにボタンの保存、キャンセル、削除、すべての作業が表示されます。

カラーセルでは、ユーザーがセルをクリックしたときにカラーピッカーを表示し、カラーピッカーを使用してカラーを変更し、保存、削除、またはキャンセルすることができます。取り消しと削除は正常に行われますが、新しい色を選択して保存すると、クリックイベントが再度トリガーされます。だから私が保存し終わったら、それは保存されますが、私は再び表示される編集フィールドを持っています。私はすべてを正しいものにするためにキャンセルをクリックしなければならない。ここに私のコードがあります。

$(document).ready(function() { 
....... 
...... 

//Editable class: Edit an entry when mouse hover 
     $('.editablecolor').live({ 
      click: function (e) { 

       //start inline editing 
       alert('editing color'); 
       var $editable = $(this); 
       if ($editable.hasClass('active-inline')) { 
        return; 
       } 

       //get the current backgroundColor 
       initialValue = $(this).css('background-color'); 
       editType = 'color'; 
       alert(initialValue); 


       $editable 
       .addClass('active-inline') 
       .empty(); 

       //define the edit element 
       var editElement = '<input type="text" class="kolorPicker" />'; 
       $(editElement) 
       .val(initialValue) 
       .appendTo($editable) 
       .focus(); 

       addEditButtons($editable); 

      } 
     }); 


function addEditButtons($editable) { 
      $editable.append('<div class="editFieldButtons"><input type="button" value="save" class="editFieldSave"/>' + 
       ', <input type="button" value="delete" class="editFieldDelete"/>or ' + 
       '<input type="button" value="cancel" class="editFieldCancel"/></div>'); 

      $('.editFieldButtons > .editFieldSave').click(editSave); 
      $('.editFieldButtons > .editFieldDelete').click(editDelete); 
      $('.editFieldButtons > .editFieldCancel').click(editCancel); 
      $('input.editField').keydown(function (e) { 
       if (e.keyCode == 13) { 
        // Enter 
        editSave(); 
       } else if (e.keyCode == 27) { 
        // Escape 
        editCancel(); 
       } 
      }); 

     } 


//Saving edit value 
     function editSave() { 
      alert('editSave editType: ' + editType); 

      if (editType == 'name') { 

//    ...works correctly 
      } 
      else if (editType == 'color') { 

       alert('editSave start to save '); 

       $('.editFieldButtons, .kolorPicker').attr('disabled', 'disabled'); 
       var $editField = $('.kolorPicker'); 
       var $editable = $editField.parents('.editablecolor'); 
       var contents = $editField.val(); 
       var parentdiv = $editable.parents('div').filter(':first').attr('id'); 
       var editID = $editable.attr('id').toString().split('_')[1]; 
       $editField.replaceWith('<em class="ajax">Saving...</em>'); 

       alert('editSave about to save '); 
       // post the new value to the server along with its ID 
       $.post(
        processpage, 
        { id: editID, value: contents, tc: parentdiv, cmd: cmdUpdate, fieldToUpdate: editType }, 
        function (data) { 
         $editable 
          .removeClass('active-inline') 
          .empty() 
          .css('background-color', contents); 
         alert('editSave finish to save '); 
        }); 
      } 
     } //end function 

ありがとうございました。

Answer 1

editSave機能でevent.stopPropagation()を呼び出して、クリックが親に伝播しないようにするにはどうすればよいですか？もちろん、イベントを関数のパラメータとして最初に追加する必要があります。

http://api.jquery.com/event.stopPropagation/