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

Question

I've been testing this script with many different arguments to put in .off() but can make this work. I want the boxes to be removable after clicking the "remove" button and I want them to be unremovable after switching the button back to done. This is my code:

 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

Your .off() call is removing ALL the click bindings on body , so you removed the delegation to #remove . You only want to remove the delegations to button.box , so it should be $('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>