jQuery AJAXが更新されたdivクラスを認識しない

Question

私は基本的なチェックリストサイトを作成しており、jQueryの$ .ajax（）を使用してチェック/チェック解除リクエストをサーバーに送信しています。ユーザーがチェックボタンまたはチェックボックスをクリックすると、jQueryは親リストアイテムdivから検証トークンとIDを取得し、アイテムの現在の状態をチェックしたり、チェックを外したりしてアクションを送信し、成功するとtoggleClass（） divを更新し、CSSを使用して現在の状態を反映させます。

バックエンドは問題なく動作していますが、チェックされた項目のチェックを外そうとすると、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; 
}); 

任意のアイデアはどのように確認し、クラスを永続化するには？前もって感謝します！

Answer 1

@Wondergrubと@Mikeyのおかげで本当の問題は、CSSをHTMLに2つのチェックボタンを付けて、クラスを切り替えるようなAjaxの試行をオーバーライドしていたことでした。私は2つのボタンを1つにまとめ、CSSとボイラーを修正しました！解決済み。