如何在这种情况下使用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');。

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'); 
 
});

  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>