jquery Inline editing issue:click still triggering even after save

I'm having somes issues with inline editing in jquery and I hope you can help me. I have a table generated dynamically with data in 2 cells. One cell contains the name of an activity and the others is empty but have a background-color that shows the color assigned the activity.

now I want to do inline editing. For the name part, it's working fine. When you click on the name, an input box appears with button save, cancel, delete..all work good.

For the color cell, the idea is to display a color picker when the user click in the cell, and it can change the color using the colorpicker then save, delete or cancel. cancel and delete work good but when saving after choosing a new color, the click event is triggered again. So when I finished to save, It saves but then I have the edit field that appear again. I have to click on cancel to get everything correct. Here is my code for more clarity.

$(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开发者_Go百科').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

Thanks for your help.

---

What if you call event.stopPropagation() in your editSave function to prevent the click from propagating to the parent? Of course you have to add the event as a function parameter first.

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