jQuery AJAX无法识别更新的div类

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

后端工作得很好，但我遇到的麻烦是当我试图取消选中的项目时jQuery不能识别新切换的类并继续执行，就好像它是一个检查操作。

我正在使用.on（），并绑定到低级元素.main-content，并将按钮指示为子元素。在这种情况下，虽然jQuery仍然会检查一个.unchecked类，所以每个未选中的尝试仍然会注册为检查操作。

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

一个更多的说明 - 检查&取消选中按钮是单独的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将其识别并正确切换类？提前致谢！

来源

2016-05-12 Jonathan Marasco

如果我已经正确地阅读你的问题，它似乎在这个小提琴中工作正常（https://jsfiddle.net/v21qf0vq/）。不过，我嘲笑ajax调用并使用简单的CSS。是否有可能ajax调用取消选中失败？或者，你有没有可能掩盖某些东西的CSS？ – WonderGrub

您的清单项目有两个检查按钮。将实际元素上的单击检查按钮的状态（与列表项相反）是否更有意义？这是你的代码的[修改和缩短版本]（http://codepen.io/anon/pen/qZwWeK）。 – Mikey

@Mikey这个类在列表项上而不仅仅是按钮上，所以整个项目可以改变颜色而不仅仅是检查按钮。当项目状态相反时，CSS中的按钮被设置为“display：none”。 @WonderGrub ajax调用成功，它只是在执行成功函数之前立即恢复为未经检查。 –

感谢@Wondergrub和@Mikey - 真正的问题是我的CSS与在HTML中重复ajax尝试切换类的两个检查按钮相关联。我将两个按钮组合成一个并固定CSS，然后瞧！解决了。

来源

2016-05-18 16:12:07

jQuery AJAX无法识别更新的div类

回答

相关问题