Question

我想添加一个类，以便在$(ajax)成功时动态添加内容。

我在外部Javascript文件中有以下功能，该文件包含在页面的开头。但是，所有代码都在document.ready()内执行。

follwing函数通过AJAX获取项目并将它们添加到列表中。

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) {
      var subid;
      var cssid;
      $.each(data, function(index, data) {
        subid = data.id;
        cssid = "training_management_categories_list_a_"+subid.toString();
        $('#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="'+cssid+'">'+data.name+'</a> \
          </li> \
        ');     
      });
    }
  });
}

我有按钮来添加，编辑和删除项目。所有这些功能都很好。 但是，在创建新项目后，我想自动＆＃34;选择＆＃34;它（意思是我将变量切换到所选项目的ID并将类categories_selected应用于它。通过点击工作选择项目：

$('#training_management_categories_items').on('click', '.training_management_categories_list_a', function (e) {
        e.preventDefault();
        categoryid = $(this).attr('id');
        selectedcategoryid = $(this).attr('data-id');
        selectedcategoryname = $(this).text();
        $("#training_management_categories_items>ul>li>a").removeClass('categories_selected');
        $(this).addClass('categories_selected');
    });

但如果我调用函数selectEditedCategory，它就不会选择相应的项目。这些是单击＆＃34; new＆＃34; -button：

时调用的两个函数

function startCategoryNewDialog() {
  $('#new_category_dialog').dialog({
    width: 250,
    height: "auto",
    show: {
      effect: "fade",
      duration: 300,
    },
    hide: {
      effect: "fade",
      duration: 300
    },
    draggable: false,
    open: function() {
      popupbg(true);
      $('#new_category_dialog_error').hide();
    },
    close: function() {
      popupbg(false);
    },
    buttons:{
      //Submit with click
      Anlegen:function(){
        submitNewCategory();
      },
      Abbrechen:function(){
        $('#new_category_dialog').dialog('close');
      }
    }
  });
}
function submitNewCategory() {
  var url = './ajax/training_management_data.php';
  if ($('#new_category_dialog_name').val().length < 2) {
    $('#new_category_dialog_error').html('<b>Fehler:</b><br>Der Name einer Kategorie muss mindestens 2 Zeichen lang sein.')
    $('#new_category_dialog_error').show( "blind" ,300);
  }
  else {
    $('#new_category_dialog_error').hide();
    $.ajax({
      url: url,
      type: "POST",
      data: {
        action: 'new_category',
        category_name: $('#new_category_dialog_name').val()
      },
      dataType: 'JSON',
      success: function (data) {
        if (data[0].operation == 'success') {
          selectedcategoryid = data[0].id;
          GetCategories();
          selectEditedCategory(selectedcategoryid); //THIS IS THE CALL TO THE FUNCTION
          $('#new_category_dialog_name').val('');
          $('#new_category_dialog').dialog('close');
        }
        else if (data == 'error-name_present') {
          $('#new_category_dialog_error').html('<b>Fehler:</b><br>Kategorie mit gleichem Namen bereits vorhanden.')
          $('#new_category_dialog_error').show( "blind" ,300);
        }
        else {
          $('#new_category_dialog_error').html('<b>Fehler:</b><br>Fehler beim Anlegen der Kategorie.')
          $('#new_category_dialog_error').show( "blind" ,300);
        }
      }
    });
  }
}

现在剩下的是不起作用的功能：

function selectEditedCategory(catid) {
  categoryid = 'training_management_categories_list_a_' + catid.toString();
  $("#training_management_categories_items>ul>li>a").removeClass('categories_selected');
  $('#'+categoryid).addClass('categories_selected');
  //$('#'+categoryid).trigger('click');
  //document.getElementById(categoryid).click();
  console.log(categoryid);
}

正如您所看到的，我还尝试通过getElementById和trigger来引用id。但是，Console不返回任何错误，categoryid类似于training_management_categories_list_a_80，其中80是从数据库中获取的一个ID。

如果我使用Firebug查看代码，它会正确显示这样的链接（只是一个示例）：

<div id="training_management_categories_items">
    <ul id="training_management_categories_items_ul" style="list-style: none; margin-left:0px; margin-top:0px; padding:0px;">
        <li class="training_management_categories_list">
            <a id="training_management_categories_list_a_all" class="training_management_categories_list_a" href="">Alle</a>
        </li>
        <li class="training_management_categories_list">
            <a id="training_management_categories_list_a_85" class="training_management_categories_list_a" data-id="85" href="">Some Item</a>
        </li>
    </ul>
</div>

问题是，它不起作用。如果我使用//document.getElementById(categoryid).click();控制台告诉我getElementById为null但是，正如我所说，如果我使用Firebug查看源代码，则id是正确的，因为我使用jQuery append（），所以元素应该正确插入到DOM中。 / p>

任何提示？

编辑：为了更好的可视化，列表的图片：

Picture of the Categories List

Answer 1

好的，明白了。

为什么不这样做。在submitNewCategory函数中调用GetCategories函数之前。删除所有选定类别的样式。

              $("#training_management_categories_items>ul>li>a").
                removeClass('categories_selected');

现在，在您创建动态新类别的位置，默认将动态创建的锚标记的样式添加到类categories_selected中，如下所示

    <a class='categories_selected'>

希望这有帮助

jQuery无法引用动态添加的元素

1 个答案: