jQuery adding CSS class to dynamically created elements

Question

I know this question has been asked before but I have some serious weird behaviour here... I have a DIV containing a list of anchors which are pulled via ajax from a php file (mysqli). I can dynamically add, edit and delete the items (categories) on this list. This works fine. It looks like this:

However, after a category is created I want to automatically select it. Same goes for edited categories. And, after the page first loads, the category "Alle" should be selected by default.

I have an external categories-management.js file which contains these functions amongst other things:

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

On the main page I call this function:

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

So basically, what should happen when the page first loads, the category "Alle" should be selected. This doesn't work though. I would think I got the function wrong, BUT if I delete an Item, the selectRootCategory() -function is called, too and then it works. This is the function in which it works (housing in categories-management.js, too):

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

However, the selectEditedCategory() -function never works (which is called after you edited or created a category so it gets selected) though the given variable ( categoryid ) is correct, tested with alert. The function that calls selectEditedCategory is also placed in categories-management.js.

So my questions are:

1. Why does selectRootCategory() work when it is called via success-function in the delete-dialog but not when called via $document.ready() ?
2. Why doesn't selectEditedCategory() work at all?

BTW don't get fooled by the categegorySelected variable, this is meant to determine if the edit- and delete-button are enabled or not. "Alle" is a fake category which contains all items from all categories and cannot be deleted or edited ("Alle" means "all" in German). I'm using jquery-1.10.2.

Edit: To make things more clear: The ids on the items are correctly set when I call GetCategories(); . This function does the following:

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

It works fine which is proven by the fact that I can delete and edit the categories (the functions to do so require the id of the element. However I read the ID not via the ID field as this contains a string but by the attribute "data-id" which only contains the ID (as you see in above code). So the problem lies solely at the jQuery part and not at the ajax-part.

Edit2: When I add selectRootCategory() to the success-function of GetCategories(), it works on page load. But I still don't get why it doesn't work with document.ready(). I cannot use it in GetCategories() , though because it would de-select any item and select "Alle" instead.

I can still not get selectedEditedCategory to work. The var categoryid contains a valid ID though, eg training_management_categories_list_a_70 .

Answer 1

You have to parse the data coming back from the server and add a class to it.

like

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

Hope this helps