我知道之前有人问过这个问题,但我在这里有一些严重的奇怪行为...... 我有一个包含 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中。
所以我的问题是:
- 为什么
selectRootCategory()
在通过删除对话框中的成功函数调用时有效,但在通过$document.ready()
调用时无效?< - 为什么
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
。
最佳答案
您必须解析从服务器返回的数据并向其添加一个类。
喜欢
$.ajax({
...
success:function(data){
$.each(data,function(singleData){
$(singleData).addClass('blahblah');
});
}
...
});
希望对你有帮助
关于javascript - jQuery 将 CSS 类添加到动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25466078/