Question

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

Screenshot of the Item

但是，在创建类别后，我想自动选择它。编辑类别也是如此。并且，在页面首次加载后，类别＆＃34; Alle＆＃34;应该默认选择。

我有一个外部的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();
});

所以基本上，当页面首次加载时会发生什么，类别＆＃34; Alle＆＃34;应该被选中。但这并不起作用。我认为我的功能错了，但是如果我删除了一个项目，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);
      }
    }
  });
}

然而，selectEditedCategory() - 函数永远不会起作用（在编辑或创建类别后调用它以便它被选中），尽管给定变量（categoryid）是正确的，使用alert进行测试。调用selectEditedCategory的函数也放在categories-management.js。

中

所以我的问题是：

为什么selectRootCategory()在删除对话框中通过success-function调用时有效，但在通过$document.ready()调用时无效？
为什么selectEditedCategory()根本无法工作？

BTW不会被categegorySelected变量所迷惑，这是为了确定是否启用了编辑和删除按钮。＆＃34;全部＆＃34;是一个假类别，包含所有类别的所有项目，不能删除或编辑（＆＃34; Alle＆＃34;表示＆＃34;所有＆＃34;德语）。我使用的是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，因为它包含一个字符串，但是属性＆＃34; data-id＆＃34;它只包含ID（正如你在上面的代码中看到的那样）。所以问题仅在于jQuery部分，而不在于ajax部分。

Edit2：当我将selectRootCategory（）添加到GetCategories（）的成功函数时，它适用于页面加载。但我仍然不明白为什么它不能与document.ready（）一起使用。我无法在GetCategories()中使用它，但因为它会取消选择任何项目并选择＆＃34; Alle＆＃34;代替。

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

Answer 1

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

像

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

希望这有帮助

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

1 个答案: