Javascript jQuery向动态创建的元素添加CSS类

我知道以前有人问过这个问题，但我有一些严重的奇怪行为。。。 我有一个DIV，其中包含通过ajax从php文件（mysqli）中提取的锚点列表。我可以动态添加、编辑和删除此列表上的项目（类别）。这个很好用。看起来是这样的：

但是，创建类别后，我希望自动选择它。编辑过的类别也是如此。 并且，在页面首次加载后，默认情况下应选择类别“Alle”

我有一个外部categories-management.js文件，其中包含以下功能：

function selectRootCategory () {
  selectedcategoryname = "Alle";
  categegorySelected = 0;
  $("#training_management_categories_items>ul>li>a").removeClass('categories_selected');
  $('#training_management_categories_list_a_all').addClass('categories_selected');
}
function selectEditedCategory() {
  categorySelected = 1;
  categoryid = 'training_management_categories_list_a_' + selectedcategoryid.toString();
  $("#training_management_categories_items>ul>li>a").removeClass('categories_selected');
  $('#'+categoryid).addClass('categories_selected');
}

在主页面上，我调用此函数：

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

因此，基本上，当页面第一次加载时，应该选择类别“Alle”。但这不起作用。 我可能认为我的函数搞错了，但是如果我删除一个项目，也会调用

selectRootCategory（）

-函数，然后它就会工作。这就是它工作的函数（也包含在categories-management.js中）：

我可以删除和编辑类别（这样做的函数需要元素的id。但是我不是通过id字段读取id，因为它包含字符串，而是通过属性“data id”读取id，该属性只包含id（如上面代码中所示）因此，问题只存在于jQuery部分，而不存在于ajax部分

Edit2：当我将selectRootCategory（）添加到GetCategories（）的success函数中时，它可以在页面加载时工作。但是我仍然不明白为什么它不能与document.ready（）一起工作。我不能在

GetCategories（）

中使用它，尽管它会取消选择任何项目，而是选择“Alle”

我仍然无法让SelectedCategory工作。

---

var

categoryid

包含有效的ID，例如

training\u management\u categories\u list\u a\u 70

您必须解析从服务器返回的数据并向其中添加一个类

像

---

希望这有帮助

这不起作用，因为从服务器返回的数据只是创建或更改的元素的ID。要获取列表，我使用另一个函数

GetCategories（）

将ID添加到列表项中。这仍然无法解释为什么选择RootCategory（）当它在delete函数中被调用时有效，但当它被document.ready（）调用时无效。因为这是一个非常庞大的构造，所以添加一个小提琴就不那么容易了。我想我添加了所有相关的信息。两点，第一点是：“为什么selectRootCategory（）在删除对话框中通过success函数调用时工作，但在通过$document.ready（）调用时不工作？“您的控制台错误是什么？您是否尝试过通过控制台运行该函数，并查看它是否按应有的方式运行？@Adjit无错误，如果我手动运行它，它就工作。因此我假设原因

selectRootCategory（）

在您的

$（文档）.ready（）中不起作用

函数，因为该函数只运行一次，很可能是在加载动态元素之前。因此，您应该使用ajax回调来确定何时加载了某些数据。函数在其他函数中工作，因为它是在何时执行的。请尝试放置

console.log（'在选定根目录中'）

查看函数是否实际执行函数，而不是添加或删除类。

function submitDeleteCategory() {
  var url = './ajax/training_management_data.php';
  $('#delete_category_dialog_error').hide();
  $.ajax({
    url: url,
    type: "POST",
    data: {
      action: 'delete_category',
      category_id: selectedcategoryid,
    },
    dataType: 'JSON',
    success: function (data) {
      if (data == 'success') {
        GetCategories();
        CheckIfCategoryChecked();
        selectRootCategory(); //THIS WORKS
        categorySelected = 0;

        $('#delete_category_dialog').dialog('close');
      }
      else {
        $('#delete_category_dialog_error').html('<b>Fehler:</b><br>Fehler beim Löschen der Kategorie.')
        $('#delete_category_dialog_error').show( "blind" ,300);
      }
    }
  });
}

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">Alle</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" data-id="'+data.id+'" id="training_management_categories_list_a_'+data.id+'">'+data.name+'</a> \
          </li> \
        ');     
      });
    }
  });
}

  $.ajax({
    ...
    success:function(data){
        $.each(data,function(singleData){
           $(singleData).addClass('blahblah');
        });
    }
    ...
  });