我知道如果我动态添加内容,我必须使用on()为父元素使用事件处理程序。但是当我在动态添加的内容上使用addClass时,该类会立即消失。
这是HTML的相关部分(只是为了确保我不会错过拼写错误):
<div id="training_management_categories_items">
<ul style="list-style: none; margin-left:0px; margin-top:0px; padding:0px;" id="training_management_categories_items_ul">
</ul>
</div>
以下是添加动态元素的代码:
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">All</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" id="training_management_categories_list_a_'+data.id+'">'+data.name+'</a> \
</li> \
');
});
}
});
}
$(document).ready(function() {
GetCategories();
});
但是当我单击该元素时,该类被添加为0.1秒(必须将background-color
.categories_selected
切换为红色才能看到它)并且我不明白为什么。
$('#training_management_categories_items').on('click', '.training_management_categories_list_a', function () {
$(this).addClass('categories_selected'); // DOESN'T WORK
alert( $( this ).text() ); // THIS WORKS
});
因此,如果我点击其中一个动态创建的元素,它会显示文本(例如“All”,它不是从php获取的,但你明白了)但不会永久添加该类。
只为我制作ABSOLUTE确定我没有错过任何真正愚蠢的东西,这里是CSS:
a.training_management_categories_list_a {
text-decoration:none;
display:block;
background-image:url("img/icons/folder.png");
background-size:16px 16px;
padding-left:25px;
background-repeat:no-repeat;
font-size:9pt;
background-position:4px 2px;
height:20px;
padding-top:2px;
}
a.training_management_categories_list_a:hover {
background-color:#aaa;
}
a#training_management_categories_list_a_all {
font-weight:bold;
}
a.categories_selected {
background-color:#aaa !important;
}
我在这里错过了什么吗?
编辑:使用jquery-1.10.2.js
答案 0 :(得分:1)
你的代码还可以,我在一个jsfiddle:http://jsfiddle.net/carloscalla/n42m6gpf/1/
中尝试过正在发生的事情是,您在a.categories_selected
中设置的颜色与之前(在悬停中)的颜色相同,我将其更改为黄色background-color: yellow !important;
,因此您意识到它正在运行。尝试单击该链接,您将看到它在弹出警报之前如何更改背景颜色。
更新:仅供寻找知识答案的人使用。 Anchor元素重新加载页面,因此样式将设置为初始样式。您正在使用ajax,因此您不希望重新加载页面,因此您应该将e
参数传递给您的函数并在e.preventDefault()
函数上使用onClick
以避免默认行为锚标记。
答案 1 :(得分:1)
也许这适合你,改变这一行:
$(this).addClass('categories_selected'); // DOESN'T WORK
到这一个:
$(this).parent().find('.training_management_categories_list_a').addClass('categories_selected');
我不知道为什么,但我之前已经看过这个问题并以这种方式解决了。
答案 2 :(得分:0)
您是否尝试过检查元素以查看该类是否存在?这通常可以帮助我找出问题所在。可能是另一个班级正在覆盖你班级的属性......?