取消按钮在jQuery中不起作用

Question

Tried to implement edit, save, cancel in collapsible accordion. Everything is working fine. Data is passing and data is saving. Cancel button is not working. When user not willing to save the data he must cancel and go back to first state of the form. I used glyphicons instead of buttons and used jquery functions to achieve the requirement but cancel is not happening.

 <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

In this case i would use CSS/HTML to hide/show different states in your application. I think the DOM bindings are messing up, since you are changing HTML with javascript.

When user goes in to editing mode, then hide the notEditing class and show 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>

If its ok for you to just reset by refreshing the page, then do that. If not, then you should save form state, when the user is entering editing mode.