jQuery将CSS类添加到动态创建的元素中

Question

我知道这个问题以前曾被问过，但我这里有一些严重的怪异行为...我有一个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”。 但是，这不起作用。 我想我弄错了功能，但是如果我删除一个Item， selectRootCategory()调用selectRootCategory() -function， 然后它会工作。 这是它起作用的功能（也位于category-management.js中）：

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);
      }
    }
  });
}

但是，尽管给定变量（ categoryid ）正确且已通过警报测试，但selectEditedCategory()函数永远不会起作用（在您编辑或创建类别后便被选中，因此会被调用）。 调用selectEditedCategory的函数也放置在selectEditedCategory -management.js中。

所以我的问题是：

1. 为什么通过delete-dialog中的success-function调用selectRootCategory()而不是通过$document.ready()调用时，为什么呢？
2. 为什么selectEditedCategory()根本selectEditedCategory() ？

顺便说一句，不要被categegorySelected变量欺骗，这是用来确定是否启用了编辑和删除按钮。 “ Alle”是伪造的类别，其中包含所有类别的所有项目，并且不能删除或编辑（“ Alle”在德语中表示“ all”）。 我正在使用jquery-1.10.2。

编辑：为了使事情更清楚：当我调用GetCategories();时，正确设置了项目上的id GetCategories(); 。 此函数执行以下操作：

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> \
        ');     
      });
    }
  });
}

我可以删除和编辑类别（事实证明，该功能需要元素的ID。）证明了这一点很好，但是我不是通过ID字段读取ID，因为它包含字符串，而是通过属性“ data-id”（仅包含ID）（如您在上面的代码中所见）。因此，问题仅出在jQuery部分，而不在ajax部分。

Edit2：当我将selectRootCategory（）添加到GetCategories（）的成功函数中时，它可以在页面加载时工作。 但是我仍然不明白为什么它不适用于document.ready（）。 我不能在GetCategories()使用它，因为它会取消选择任何项目并选择“ Alle”。

我仍然无法使selectedEditedCategory正常工作。 但是，var categoryid包含有效ID，例如training_management_categories_list_a_70 。

Answer 1

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

喜欢

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

希望这可以帮助