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

Question

我有一个在 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); 

   }

请注意，跨度的 ID 为 span0、span1 等。

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

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

但是，这不起作用。我相信这个问题与跨度是动态创建的事实有关，但我不知道如何解决这个问题。

预先感谢您的帮助。

Answer 1

您创建了错误的id(它们都有 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>';