如何在动态创建的 DOM 元素上使用 addClass / removeClass答案

【问题标题】：How to use addClass / removeClass on dynamically created DOM elements如何在动态创建的 DOM 元素上使用 addClass / removeClass
【发布时间】：2012-07-10 16:07:45
【问题描述】：

我有一个在 document.ready() 中调用的函数，它创建跨度。

function configureContentSelector() {
  for (j=0; j<centerContent.length; j++)
    {
        var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span'" + j + ">" + j  + "</span>";
        $("#contentSelectorArea").html($("#contentSelectorArea").html() + content); 

   }

请注意，跨度被标识为 span0、span1 等。

在触发与跨度无关的事件时调用的单独函数中，我想操作跨度类 (addClass() removeClass())

$("#" + "span" + i).removeClass("contentSelector");
$("#" + "span" + i).addClass("contentSelectorSelected");

但是，这不起作用。我认为这个问题与 span 是动态创建的这一事实有关，但我不知道如何解决这个问题。

提前感谢您的帮助。

【问题讨论】：

一旦 span 被插入到 DOM 中，您可以在它们上调用 addClass 或 removeClass
你操作类的函数是什么？ i 在您的 add/removeClass 中的值是多少？

标签： jquery jquery-selectors

【解决方案1】：

你创建了错误的ids（它们都有 id=span）：

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span'" + j + ">" + j  + "</span>";

试试这个：

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span" + j + "'>" + j  + "</span>";

顺便说一句，您的报价应该是颠倒的：

var content = '<span class="contentSelector" onclick="changeContent(' + j + ')" id="span' + j + '">' + j  + '</span>';

【讨论】：

顺便说一句：我认为引号的顺序无关紧要（双引号中的单引号或反之亦然）。
好吧，这似乎并不重要（check this），大多数时候（根据我的经验）人们在 html 属性中使用"，所以（至少对我来说）感觉更多自然.

【解决方案2】：

我认为这里有错误

id='span'" + j + ">"

改成

id='span" + j + "'>"

并使用

$("#contentSelectorArea").append(content);

【讨论】：

【解决方案3】：

我会删除 ID 并使用 data-* 属性（无论如何，您的 ID 声明存在语法错误）。

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' data-spanid='" + j + "'>" + j  + "</span>";

然后您可以使用data-* 属性进行选择：

$("span[data-spanid='" + i + "']");

【讨论】：

【解决方案4】：

您在创建控件时遇到了一个简单的错误。检查创建的 id 属性中的引号。

使用它，它会正常工作。

var content = "<span class='contentSelector' onclick='changeContent(" + j + ")' id='span" + j + "'>" + j  + "</span>";

【讨论】：