javascript - 将其绑定(bind)为我在 ajax 成功回调中单击的复选框

这是我的代码(请原谅 html.erb 中的脚本标记):

<div class="lists">
  <h1>Your Todo Lists</h1>
    <% @lists.each do |list| %>
      <div id="list">
        <%= list.title %>
        <% list.items.each do |item| %>
        <div class="item-list">
          <%= form_for :item, url: item_path(item), method: :post, html: { class: "item-box" } do |f|%>
            <%= f.label item.title %>
            <%= f.check_box item.id %>
          <% end %>
        </div>
        <% end %>
      </div>
    <% end %>
</div>

<script>
  $(document).ready(function() {

    var changeDom = function(itemRow) {
      itemRow.closest(".item-list").remove()
      // $("complete-list").append(this)
    }

    var itemList = $(".item-list")
    itemList.find(":checkbox").on("change", function(box){
      var box = $(this)
      var item_number = parseInt(box[0].name.match(/[^[\]]+(?=])/g)[0])
      $.ajax( { type: "PUT",
          url: "items/" + item_number,
          data: { id: item_number },
          success: function(text) {
            debugger;
            changeDom(this.closest(".item-list"))
          }
        });
      })
    })
</script>

在我的成功回调中，我有调试器...这似乎是 ajax 对象(它有一个 url 路径和数据)，但我希望“this”成为我单击的复选框。我该怎么办？我在我认为应该的地方尝试了bind(this)...但似乎没有任何效果。基本上，我试图从 DOM 中删除复选框的行并将其附加到 DOM 上的其他位置。

最佳答案

改变