Question

我正在创建一个基本的清单网站，并使用jQuery的$ .ajax（）将检查/取消检查请求发送到服务器。当用户单击检查或取消选中按钮时，jQuery从父列表项div获取验证令牌和id，确定项目的当前状态（选中/取消选中）并发送操作，成功时使用toggleClass（）更新div并通过CSS反映当前状态。

后端工作正常，但我遇到的麻烦是当我尝试取消选中一个已检查的项目时，jQuery无法识别新切换的类并继续进行，就好像它是一个检查操作。

我正在使用.on（），并绑定到低级元素.main-content，并将按钮指示为子元素。在这种情况下，虽然jQuery继续查看.unchecked类甚至一旦被检查，所以每次取消检查尝试仍然会注册为检查操作。

我最接近的是直接用on（）而不是子元素将动作绑定到按钮。然后jQuery将看到list元素的新.checked类并通过AJAX发送取消选中操作，但是一旦它进入AJAX的成功函数，list元素上的类立即恢复为.unchecked，并且然后成功函数将其切换回.checked。

还有一个澄清 - 检查＆amp;取消选中按钮是单独的html元素，并通过CSS display:none基于列表项类隐藏/显示。

列出项目HTML：

<li class="list-item unchecked" id="6">
<input type="hidden" name="_token" value="xR4vNWKEnCQMQKQZHb1xchApfhPOnMHHBGVMmV1Z">
  <div class="item-body">
    <h4 class="item-name">Item Name</h4>
    <div class="col-sm-4 actions-col">
      <button type="button" class="btn btn-check-unchecked">
        <span class="glyphicon glyphicon-ok"></span>
      </button>
      <button type="button" class="btn btn-check-checked">
        <span class="glyphicon glyphicon-ok"></span>
      </button>
    </div>
  </div>
</li>

jQuery的：

$(".main-content").on("click", ".btn-check-unchecked, .btn-check-checked", function() {
  var listItem = $(this).closest('.list-item');
  var token = listItem.find('input[name=_token]').val();
  var id = listItem.attr('id');
  var unchecked = listItem.hasClass('unchecked');
  var checkType = unchecked ? 'check' : 'uncheck';
  listItem.addClass('pending');
  $.ajax({
    url: '/itemactions/check',
    type: 'POST',
    data: {
      _token: token,
      itemId: id,
      checkType: checkType
    },
    success: function() {
      listItem.toggleClass('checked');
      listItem.toggleClass('unchecked');
      listItem.removeClass('pending');
    },
    error: function() {
      listItem.removeClass('pending');
    }
  });
  return false;
});

任何想法如何坚持已检查的类，以便jQuery识别它并正确切换类？提前谢谢！

Answer 1

感谢@Wondergrub和@Mikey - 真正的问题是我有一个CSS与html中的两个检查按钮相关联，这些按钮覆盖了ajax尝试切换类。我将两个按钮组合成一个并修复了CSS并瞧！解决。

jQuery AJAX无法识别更新的div类

1 个答案: