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類

回答

相關問題