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 секунды (пришлось переключить 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; 
} 

Я пропускаю что-то здесь?

Edit: с помощью JQuery-1.10.2.js

Answer 1

Ваш код хорошо, я попробовал, что в jsfiddle: http://jsfiddle.net/carloscalla/n42m6gpf/1/

Что происходит, что цвет, который вы устанавливаете в a.categories_selected является тот же цвет, что и раньше (в режиме наведения), я изменил его на желтый background-color: yellow !important;, поэтому вы понимаете, что он работает. Попробуйте щелкнуть ссылку, и вы увидите, как она меняет цвет фона перед появлением предупреждения.

ОБНОВЛЕНИЕ: Просто для людей, которые ищут ответы. Якорный элемент перезагружает страницу, поэтому стили будут установлены на начальные. Вы используете ajax, поэтому не хотите, чтобы страница была перезагружена, поэтому вы должны передать параметр e в свою функцию и использовать e.preventDefault() в своей функции onClick, чтобы избежать поведения тега привязки по умолчанию.

Answer 2

Вы пытались проверить элемент, чтобы узнать, присутствует ли класс? Это обычно помогает мне определить, что происходит не так. Возможно, другой класс переопределяет свойства вашего класса ...?

Answer 3

Может быть, это работает для вас, измените эту строку:

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

к этому:

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

Я не знаю, почему, но я видел эту проблему раньше, и решил с этим способом ,