gpt4 book ai didi

javascript - jQuery AJAX 无法识别更新的 div 类

转载 作者:行者123 更新时间:2023-11-28 05:53:31 25 4
gpt4 key购买 nike

我正在创建一个基本的 list 网站,并使用 jQuery 的 $.ajax() 将检查/取消检查请求发送到服务器。当用户单击选中或取消选中按钮时,jQuery 从父列表项 div 获取验证 token 和 ID,确定元素的当前状态(选中/未选中)并发送操作,成功时使用 toggleClass()更新 div 并通过 CSS 反射(reflect)当前状态。

后端工作得很好,但我遇到的问题是当我尝试取消选中一个选中的元素时,jQuery 无法识别新切换的类并继续进行,就好像它是一个检查操作一样。

我正在使用 .on(),并绑定(bind)到低级元素 .main-content,并将按钮指示为子元素。在这种情况下,虽然 jQuery 继续看到一个 .unchecked 类,即使它已经被检查过,所以每次取消检查尝试仍然注册为检查操作。

我最接近的是直接使用 on() 而不是作为子元素将操作绑定(bind)到按钮。然后 jQuery 将看到列表元素的新 .checked 类并通过 AJAX 发送取消选中操作,但是一旦它到达 AJAX 的成功函数,列表元素上的类立即恢复为 .unchecked,然后成功函数将其切换回.检查过。

再澄清一下 - 选中和取消选中按钮是单独的 html 元素,通过基于列表项类的 display:none 的 CSS 隐藏/显示。

列表项 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 识别它并正确切换类吗?提前致谢!

最佳答案

感谢@Wondergrub 和@Mikey - 真正的问题是我的 CSS 与 html 中的两个检查按钮相关联,它们覆盖了 ajax 切换类的尝试。我将两个按钮合二为一并修复了 CSS 瞧!已解决。

关于javascript - jQuery AJAX 无法识别更新的 div 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37192147/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com