私は基本的なチェックリストサイトを作成しており、jQueryの$ .ajax（）を使用してチェック/チェック解除リクエストをサーバーに送信しています。ユーザーがチェックボタンまたはチェックボックスをクリックすると、jQueryは親リストアイテムdivから検証トークンとIDを取得し、アイテムの現在の状態をチェックしたり、チェックを外したりしてアクションを送信し、成功するとtoggleClass（） divを更新し、CSSを使用して現在の状態を反映させます。jQuery AJAXが更新されたdivクラスを認識しない
バックエンドは問題なく動作していますが、チェックされた項目のチェックを外そうとすると、jQueryは新しくトグルされたクラスを認識せず、代わりにチェックアクションであるかのように処理します。
私は.on（）を使用して、低レベル要素の.main-contentにバインドして、子要素としてボタンを示しています。この場合、jQueryはチェックされた後でも.uncheckedクラスを表示し続けますが、未チェックの試みはすべてチェックアクションとして登録されます。
私が一番近かったのは、子要素としてではなくon（）を使ってボタンにアクションを直接バインドすることでした。 jQueryはlist要素の新しい.checkedクラスを見て、AJAXを介して未確認のアクションを送信しますが、AJAXのsuccess関数に到達すると直ちにlist要素のクラスが.uncheckedに戻り、success関数がそれを元に戻します。チェック。
もう1つの説明 - チェックの&チェックボックスは、別の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：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;
});
任意のアイデアはどのように確認し、クラスを永続化するには？前もって感謝します！
問題を正しく読んだら、このフィドル（https://jsfiddle.net/v21qf0vq/）で正常に動作しているようです。しかし、私はajax呼び出しを嘲笑し、シンプルなCSSを使用しています。チェックを外すためのajax呼び出しが失敗する可能性はありますか？または、あなたは何かを隠すかもしれないCSSを持っていますか？ – WonderGrub
あなたのリストアイテムには2つのチェックボタンがあります。クリックされたチェックボタンの状態を実際の要素に（リスト項目とは反対に）アタッチする方がいいでしょうか？ここにあなたのコードの[改訂と短縮バージョン]（http://codepen.io/anon/pen/qZwWeK）です。 – Mikey
@Mikeyクラスだけがボタンの代わりにリスト項目に表示されるので、アイテム全体がチェックボタンの代わりに色を変えることができます。アイテムの状態が反対の場合、ボタンはCSSで 'display：none'に設定されます。 @WonderGrub ajax呼び出しが成功した場合、success関数を実行する直前にチェックが外されます。 –