如何在這種情況下使用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>