jQuery無法將類添加到動態添加的內容

Question

我知道，如果我動態添加內容，則必須使用on（）為父元素使用事件處理程序。 但是，當我在動態添加的內容上使用addClass時，該類立即消失。

這是HTML的相關部分（只是為了確保我不會錯過錯字）：

<div id="training_management_categories_items">
    <ul style="list-style: none; margin-left:0px; margin-top:0px; padding:0px;" id="training_management_categories_items_ul">
    </ul>
</div>

這是添加動態元素的代碼：

function GetCategories()
{
  var url = './ajax/training_management_data.php';
  $('#training_management_categories_items').html('<ul style="list-style: none; margin-left:0px; margin-top:0px; padding:0px;" id="training_management_categories_items_ul"></ul>');
  $('#training_management_categories_items_ul').append(' \
    <li class="training_management_categories_list"> \
      <a href="" class="training_management_categories_list_a" id="training_management_categories_list_a_all">All</a> \
    </li> \
  ');
  $.ajax({
    url: url,
    type: "POST",
    data: "action=get_categories",
    dataType: 'json',
    success: function (data) {
      $.each(data, function(index, data) {
        $('#training_management_categories_items_ul').append(' \
          <li class="training_management_categories_list"> \
            <a href="" class="training_management_categories_list_a" id="training_management_categories_list_a_'+data.id+'">'+data.name+'</a> \
          </li> \
        ');     
      });
    }
  });
}

$(document).ready(function() {
    GetCategories();
});

但是，當我單擊該元素時，該類的添加時間僅為0.1秒（必須將.categories_selected的background-color .categories_selected為紅色才能看到它），但我不知道為什么。

$('#training_management_categories_items').on('click', '.training_management_categories_list_a', function () {
    $(this).addClass('categories_selected'); // DOESN'T WORK
    alert( $( this ).text() ); // THIS WORKS
});

因此，如果我單擊動態創建的元素之一，它將顯示文本（例如，“ All”（不是從php提取的，但您知道了）），但不會永久添加該類。

而對於我來說，絕對要確保我沒有錯過任何真正愚蠢的東西，這是CSS：

a.training_management_categories_list_a {
    text-decoration:none;
    display:block;
    background-image:url("img/icons/folder.png");
    background-size:16px 16px;
    padding-left:25px;
    background-repeat:no-repeat;
    font-size:9pt;
    background-position:4px 2px;
    height:20px;
    padding-top:2px;
}

a.training_management_categories_list_a:hover {
    background-color:#aaa;
}

a#training_management_categories_list_a_all {
    font-weight:bold;
}

a.categories_selected {
    background-color:#aaa !important;
}

我在這里想念什么嗎？

編輯：使用jquery-1.10.2.js

Answer 1

您的代碼還可以，我在jsfiddle中進行了嘗試： http : //jsfiddle.net/carloscalla/n42m6gpf/1/

發生的是，您在a.categories_selected中設置的顏色與之前（懸停時）的顏色相同，我將其更改為黃色background-color: yellow !important; 所以您意識到它正在工作。 嘗試單擊鏈接，您將在警報彈出之前看到它如何更改背景顏色。

更新：僅適用於尋找答案的人。 Anchor元素會重新加載頁面，因此樣式將設置為初始樣式。 您正在使用ajax，因此您不希望重新加載頁面，因此應將e參數傳遞給函數，並在onClick函數上使用e.preventDefault()以避免錨標記的默認行為。

Answer 2

也許這對您有用，更改此行：

$(this).addClass('categories_selected'); // DOESN'T WORK

對此：

$(this).parent().find('.training_management_categories_list_a').addClass('categories_selected');

我不知道為什么，但是我以前已經看到過這個問題，並且已經用這種方法解決了。

Answer 3

您是否嘗試過檢查元素以查看是否存在該類？ 通常，這可以幫助我確定問題所在。 可能是另一個類正在覆蓋您的類的屬性...？