取消按钮在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>

如果可以通过刷新页面进行重置，可以这样做。 如果不是，那么当用户进入编辑模式时，您应该保存表单状态。