如何在这种情况下使用jQuery .off（）？

Question

我一直在使用许多不同的参数来测试这个脚本以放入.off（），但是可以使它工作。我希望在单击“删除”按钮后可以移除这些框，并且我希望在将按钮切换回完成后它们是不可移除的。这是我的代码：

var remove = "<button class=\"extension\" id=\"remove\"><a href=\"#\">Remove</a></button>";
var done = "<button class=\"extension\" id=\"done\"><a href=\"#\">Done</a></button>";

$("body").on("click", "#remove", function() {
  $("#button_field").html(done);

  $("body").on("click", "button.box", function() {
    $(this).remove();
  });
});

$("body").on("click", "#done", function() {
  $("#button_field").html(remove);
  $("body").off();
});

            body {
              font-family: Avenir;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-weight: 400;
            }
            .center {
              margin: 0 auto;
              text-align: center;
              width: 380px;
            }
            .box {
              background: #F7F7F7;
              width: 380px;
              height: 80px;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension {
              width: 380px;
              float: left;
              margin-top: 10px;
              height: 50px;
              background: #F7F7F7;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension:hover {
              cursor: pointer;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="center">
  <h3>Click to delete</h3>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>

  <div id="button_field">
    <button class="extension" id="remove"><a href="#">Remove</a>
    </button>
  </div>
</div>

Answer 1

您的.off()来电正在删除body上的所有点击约束，因此您已将委派移至#remove。您只想将授权删除到button.box，因此应该是$('body').off('click', 'button.box');。

＆＃13;

＆＃13;

var remove = "<button class=\"extension\" id=\"remove\"><a href=\"#\">Remove</a></button>";
var done = "<button class=\"extension\" id=\"done\"><a href=\"#\">Done</a></button>";

$("body").on("click", "#remove", function() {
  $("#button_field").html(done);

  $("body").on("click", "button.box", function() {
    $(this).remove();
  });
});

$("body").on("click", "#done", function() {
  $("#button_field").html(remove);
  $('body').off('click', 'button.box');
});

＆＃13;

            body {
              font-family: Avenir;
            }
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
              font-weight: 400;
            }
            .center {
              margin: 0 auto;
              text-align: center;
              width: 380px;
            }
            .box {
              background: #F7F7F7;
              width: 380px;
              height: 80px;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension {
              width: 380px;
              float: left;
              margin-top: 10px;
              height: 50px;
              background: #F7F7F7;
              border: 1px solid #D5D5D5;
              box-shadow: 0 0 5px #BABABA;
              font-family: inherit;
              font-size: inherit;
            }
            .extension:hover {
              cursor: pointer;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="center">
  <h3>Click to delete</h3>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>
  <button class="box">REMOVE ME</button>

  <div id="button_field">
    <button class="extension" id="remove"><a href="#">Remove</a>
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;