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

Question

我知道之前有人问过这个问题，但我在这里有一些严重的奇怪行为......我有一个包含 anchor 列表的 DIV，这些 anchor 是通过 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 中):

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的函数也放在categories-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');
        });
    }
    ...
  });

希望对你有帮助