如何在jQuery中單擊取消事件

Question

設計了可折疊的標簽並實現了象形文字的內聯函數。 當用戶單擊鉛筆時，它將變成用於保存數據的軟盤，而另一個是重復的glyphicon，原因是當用戶不填寫數據時，表格應進入頁面的先前狀態，如后退按鈕。 在這里進行數據保存，保存后變成鉛筆狀態。 但是，當我單擊重復glyphicon時，它並沒有返回到頁面的先前狀態。 該表單已通過document.getElementById進行了驗證，因此如果我單擊“重復”，也會進行驗證。 編輯了代碼。 請至少有人給我一個例子，說明如何使onclick頁面的先前狀態。 我是初學者，我嘗試過一些東西，請幫助我

 $(document) .ready( function() { $('.editAddBtn') //class called from html .click( function() { //used to make textbox readonly //checks if it is already on readonly mode if ($('.editField').is('[readonly]')) { //turns the readonly off $('.editField').prop('readonly', false); //used to make textarea readonly $('.mySelect').prop('disabled', false); // used to make checkbox disabled $('#chk').prop('disabled', false); //shown pencil floppy and repeat glyphicon for onclick $('.editAddBtn') .html( '<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>' + '<span class="glyphicon glyphicon-repeat" id="reBtn">&nbsp;</span>' ); //Changes the text of the button $("#repeatBtn").click(function() { // used to make back state of the form $(this).prev().removeAttr("onclick"); $(this).prev().off("click"); $(this).prev().on("click", function() {}); }); } else { //else we do other things <!-- this is used for form validation--> //Form validation var cstreet_1 = document .getElementById('currentAddressLine1').value; if (cstreet_1 == "") { document.getElementById('currentAddressLine1') .style.borderColor = "red"; //return false; } else { document.getElementById('currentAddressLine1') .style.borderColor = "#cccccc"; } // saveAddress(); //function is used for save the data //readonly after filling the data into the textbox t $('.editField').prop('readonly', true); //readonly after filling the data into the textbox t $('.mySelect').prop('disabled', true); //readonly after filling the data into the checkbox $('#chk').prop('disabled', true); //after saving the data floppy disk turn into the pencil means normal state $('.editAddBtn').html( '<span class="glyphicon glyphicon-pencil">&nbsp;</span>' ); } }); }); 

 <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <!-- Theme CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="css/style.css" rel="stylesheet"> <link href="css/datepicker.min.css" rel="stylesheet"> <!-- Favicon --> <link rel="shortcut icon" href="img/favicon.ico"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #b3daff;"> <h4 class="panel-title"> <span style="font-weight: 700;">Addre</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> <!-- Address line 1 --> <div class="col-md-12"> <div class="row"> <div class="form-group"> <label class="control-label col-md-3" style="padding-top: 1px;">Address<span style="color: red;">*</span></label> <div class="col-md-9"> <input type="text" class="form-control editField" id="currentAddressLine1" readonly placeholder="Address Line 1" style='text-transform: capitalize' /> </div> </div> </div> <br /> </div> <!--end tag for address line 1 --> </div> </div> </div> </div> </div> <!-- begin snippet: js hide: false console: true babel: false --> 

Answer 1

試試這個代碼。 雖然我已經評論了saveAddress（）; 方法。 使用前取消注釋。

 $(document).ready( function() { $('.editAddBtn').click(function() { if ($('.editField').is('[readonly]')) { $('.editField').prop('readonly', false); $('.mySelect').prop('disabled', false); $('#chk').prop('disabled', false); $('.editAddBtn').html('<span class="glyphicon glyphicon-floppy-disk">&nbsp;</span>' + '<span class="glyphicon glyphicon-repeat" id="reBtn">&nbsp;</span>'); // $('.editAddBtn span').toggleClass('glyphicon glyphicon-floppy-disk'); $(document).on('click', "#repeatBtn",function() { $(this).prev().removeAttr("onclick"); $(this).prev().off("click"); $('.editAddBtn').html('<span class="glyphicon glyphicon-pencil">&nbsp;</span>'); }); } else { var cstreet_1 = document .getElementById('currentAddressLine1').value; if (cstreet_1 == "") { document.getElementById('currentAddressLine1').style.borderColor = "red"; //return false; } else { document.getElementById('currentAddressLine1').style.borderColor = "#cccccc"; } // saveAddress(); //function is used for save the data $('.editField').prop( //readonly after filling the data into the textbox t 'readonly', true); $('.mySelect').prop( //readonly after filling the data into the textbox t 'disabled', true); $('#chk').prop('disabled', true); $('.editAddBtn').html('<span class="glyphicon glyphicon-pencil">&nbsp;</span>'); } }); }); 

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading" style="background-color: #b3daff;"> <h4 class="panel-title"> <span style="font-weight: 700;">Addres</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> <!-- Address line 1 --> <div class="col-md-12"> <div class="row"> <div class="form-group"> <label class="control-label col-md-3" style="padding-top: 1px;"> Address<span style="color: red;">*</span></label> <div class="col-md-9"> <input type="text" class="form-control editField" id="currentAddressLine1" readonly placeholder="Address Line 1" style='text-transform: capitalize' /> </div> </div> </div> <br /> </div> </div> </div> </div> </div> </div>