jQuery无法将类添加到动态添加的内容答案

【问题标题】：jQuery cannot add class to dynamically added contentjQuery无法将类添加到动态添加的内容
【发布时间】：2014-08-21 22:14:56
【问题描述】：

我知道如果我动态添加内容，我必须使用 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 获取的，但你明白了），但不会永久添加类。

只是为了让我绝对确保我没有错过任何真正愚蠢的东西，这是 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

【问题讨论】：

你必须阻止默认操作，否则页面将被重新加载......所以要么从事件处理程序中获取return false，要么在处理程序中接收到event 参数后调用event.preventDefault()跨度>
我认为:hover 风格会妨碍您。
@ArunPJohny 哦，伙计……是的，你当然是对的。我快要发疯了。谢谢！您为什么不将此作为答案发布？
大声笑我错过了，锚元素重新加载页面哈哈
刚刚更新了我的答案，让人们知道问题出在哪里。

标签： javascript jquery css ajax

【解决方案1】：

你的代码没问题，我在 jsfiddle 中试过了：http://jsfiddle.net/carloscalla/n42m6gpf/1/

发生的情况是您在a.categories_selected 中设置的颜色与之前的颜色相同（悬停时），我将其更改为黄色background-color: yellow !important;，所以您意识到它正在工作。尝试单击该链接，您将看到它在弹出警报之前如何更改背景颜色。

更新：仅适用于寻找答案的人。 Anchor 元素重新加载页面，因此样式将设置为初始样式。您正在使用 ajax，因此您不希望重新加载页面，因此您应该将 e 参数传递给您的函数并在您的 onClick 函数上使用 e.preventDefault() 以避免锚标记的默认行为。

【讨论】：

【解决方案2】：

也许这对你有用，改变这一行：

$(this).addClass('categories_selected'); // DOESN'T WORK

到这个：

$(this).parent().find('.training_management_categories_list_a').addClass('categories_selected');

我不知道为什么，但我以前见过这个问题并用这种方式解决。

【讨论】：

【解决方案3】：

您是否尝试过检查元素以查看该类是否存在？这通常可以帮助我确定出了什么问题。可能是另一个类正在覆盖您类的属性...？

【讨论】：

不，即使在您的小提琴中，问题仍然存在。单击确定按钮后，黄色再次被删除。解决方案在 Arun P Johny 的评论中。