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>

如果可以通过刷新页面来重新设置，可以执行此操作。如果没有，那么当用户进入编辑模式时，您应该保存表单状态。

取消按钮在jQuery中不起作用

1 个答案: