Как использовать addClass/removeClass на динамически созданных элементах DOM

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 с (все они имеют идентификатор = поверочного):

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>"; 

BTW ваши котировки должны быть обратная:

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

Answer 2

Я бы удалил идентификатор и использовал data-* атрибут (в любом случае, это синтаксическая ошибка с объявлением ID).

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

Затем вы можете выбрать с помощью data-* атрибута:

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

Answer 3

Я думаю, что есть ошибка здесь

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

изменение

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

и использовать

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

Answer 4

У вас есть простая ошибка при создании вашего элемента управления. Проверьте кавычки в атрибуте id, который создается.

Используйте это, и все будет хорошо.

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