jquery内联编辑问题：即使保存后点击仍然触发

Question

我在 jquery 中内联编辑时遇到一些问题，希望你能帮助我。 我有一个动态生成的表格，其中包含 2 个单元格中的数据。一个单元格包含一项活动的名称，其他单元格为空，但具有显示分配给该活动的颜色的背景颜色。

现在我想做内联编辑。对于名称部分，它工作正常。当您单击名称时，会出现一个输入框，其中包含保存、取消、删除按钮......一切正常。

对于颜色单元格，其想法是当用户单击单元格时显示颜色选择器，并且可以使用颜色选择器更改颜色，然后保存、删除或取消。取消和删除工作正常，但选择新颜色后保存时，会再次触发单击事件。因此，当我完成保存时，它会保存，但随后我会再次出现编辑字段。我必须单击“取消”才能使一切正确。为了更清楚起见，这是我的代码。

$(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/