jQuery无法将类添加到动态添加的内容中

我知道如果我动态添加内容,我必须使用on()为父元素使用事件处理程序。 但是当我在动态添加的内容上使用addClass时,类会立即消失。

这是HTML的相关部分(只是为了确保我不会错过拼写错误):

这是添加动态元素的代码:

 function GetCategories() { var url = './ajax/training_management_data.php'; $('#training_management_categories_items').html('
    '); $('#training_management_categories_items_ul').append(' \
  • \ All \
  • \ '); $.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(' \
  • \ '+data.name+' \
  • \ '); }); } }); } $(document).ready(function() { GetCategories(); });

    但是当我单击该元素时,该类被添加为0.1秒(必须将.categories_selectedbackground-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 }); 

    因此,如果我点击其中一个动态创建的元素,它会显示文本(例如“全部”,这不是从PHP获取但你明白了)但不会永久添加类。

    而且只为我制作ABSOLUTE确定我没有错过任何真正愚蠢的东西,这里是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

    你的代码还可以,我在一个jsfiddle中尝试过: http : //jsfiddle.net/carloscalla/n42m6gpf/1/

    发生的事情是,您在a.categories_selected中设置的颜色与之前的颜色相同(在hover中),我将其更改为黄色background-color: yellow !important; 所以你意识到它正在发挥作用。 尝试单击该链接,您将看到它在弹出警报之前如何更改背景颜色。

    更新:仅供寻找答案的人知道。 Anchor元素重新加载页面,因此样式将设置为初始样式。 您正在使用ajax,因此您不希望重新加载页面,因此您应该将e参数传递给您的函数并在onClick函数上使用e.preventDefault()以避免锚标记的默认行为。

    也许这适合你,改变这一行:

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

    到这一个:

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

    我不知道为什么,但我之前已经看过这个问题并用这种方式解决了。

    您是否尝试检查该元素以查看该类是否存在? 这通常可以帮助我找出问题所在。 可能是另一个class级正在覆盖你class级的属性……?