jQuery不能为动态添加的内容添加类

jQuery cannot add class to dynamically added content

本文关键字：添加 jQuery 动态 不能      更新时间：2023-09-26

我知道，如果我动态添加内容，我必须使用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;
}

我错过了什么吗?

使用jquery-1.10.2.js编辑

你的代码是好的，我尝试了在一个jsfiddle: http://jsfiddle.net/carloscalla/n42m6gpf/1/

正在发生的事情是，您在a.categories_selected中设置的颜色与之前(在悬停中)的颜色相同，我将其更改为黄色background-color: yellow !important;，因此您意识到它正在工作。试着点击这个链接，你会看到它是如何在警报弹出之前改变背景颜色的。

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

也许这对你有用，改变这一行:

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

:

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

我不知道为什么，但我以前见过这个问题，并用这种方法解决了

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

相关文章：