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”类别。但这不起作用。 我想我的函数错了，但是如果我删除一个项目，selectRootCategory()-函数也会被调用，然后它就可以工作了。这是它工作的函数（住房分类-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);
      }
    }
  });
}

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

所以我的问题是：

1. 为什么selectRootCategory() 在通过删除对话框中的成功函数调用时可以工作，而在通过$document.ready() 调用时却不行？
2. 为什么selectEditedCategory() 根本不起作用？

顺便说一句，不要被categegorySelected 变量所迷惑，这是为了确定是否启用了编辑和删除按钮。 “Alle”是一个虚假类别，包含所有类别的所有项目，不能删除或编辑（“Alle”在德语中是“全部”的意思）。 我正在使用 jquery-1.10.2。

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

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，因为它包含一个字符串，而是通过仅包含 ID 的属性“data-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');
        });
    }
    ...
  });

希望对你有帮助