取消按鈕在jQuery中不起作用

Question

嘗試在可折疊的手風琴中執行編輯，保存，取消。 一切正常。 數據正在傳遞，數據正在保存。 取消按鈕不起作用。 當用戶不願意保存數據時，他必須取消並返回到表單的第一狀態。 我使用glyphicons而不是按鈕，並使用jquery函數來達到要求，但取消並沒有發生。

 <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #b3daff;"> <h4 class="panel-title"> <span style="font-weight: 700;">Address Details</span>&nbsp;&nbsp; <a class="editAddBtn"><span class="glyphicon glyphicon-pencil">&nbsp;</span></a> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span> </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="col-sm-4 col-md-12"> <div class="row"> <div class="form-group"> <label class="control-label col-sm-12 col-md-8">Current </label> </div> </div> </div> <script> $(document) .ready( function() { $('.editAddBtn') .click( function() { if ($('.editField').is( '[readonly]')) { //checks if it is already on readonly mode $('.editField').prop( 'readonly', false); //turns the readonly off $('.mySelect').prop( 'disabled', false); $('#chk').prop('disabled', false); $('.editAddBtn') .html( '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span><span id="removeBtn" class="glyphicon glyphicon-repeat">&nbsp;</span>'); //Changes the text of the button } else { //else we do other things saveAddress(); $('.editField').prop( 'readonly', true); $('.mySelect').prop( 'disabled', true); $('#chk').prop('disabled', true); $('.editAddBtn') .html( '<span class="glyphicon glyphicon-pencil">&nbsp;</span>'); $('#removeBtn').on('click', function(e) { e.preventDefault(); window.history.back(); }); } }); }); } </script> 

Answer 1

在這種情況下，我將使用CSS / HTML隱藏/顯示應用程序中的不同狀態。 我認為DOM綁定很混亂，因為您正在使用javascript更改HTML。

當用戶進入編輯模式時，然后隱藏notEditing類並顯示isEditing 。

<div class="col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading" style="background-color: #b3daff;">
      <h4 class="panel-title">
        <span style="font-weight: 700;">Address Details</span>&nbsp;&nbsp;
        <span class="notEditing">
          <a class="editAddBtn"><span
           class="glyphicon glyphicon-pencil">&nbsp;</span></a>
        </span>
        <span class="isEditing">
          <span class="glyphicon glyphicon-floppy-disk">&nbsp;</span><span id="removeBtn" class="glyphicon glyphicon-repeat">&nbsp;</span>
        </span>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <span class="glyphicon glyphicon-plus" id="pls" style="color: darkred">&nbsp;</span>
        </a>
      </h4>
    </div>

如果可以通過刷新頁面進行重置，可以這樣做。 如果不是，那么當用戶進入編輯模式時，您應該保存表單狀態。