Элемент доступа jQuery после загрузки DOM

Question

Я загрузил некоторый контент через innerHTML.

$('#load-text-button').click(function() { 
     document.getElementById("text-area").innerHTML="Some text <span class="footnote">The Footnote</span> Some other text. 
    }); 

Теперь я хочу, чтобы открыть вновь созданный промежуток (с классом «сноска»), когда «полужирная сноска кнопка» нажата. Кнопка footnote была загружена при загрузке документа, но текст был загружен после загрузки DOM.

$('#bold-footnote-button').click(function() { 
     $(".footnote").addClass('bold'); 
    }); 

Невозможно найти элемент ".footnote". Все, что я прочитал, указывает на использование метода .live, но документы говорят, что теперь он устарел. Как мне получить доступ к новому элементу «.footnote», не нажимая на него напрямую?

Answer 1

Функция щелчка должна работать нормально, поскольку вы не нацеливаете вновь вставленный элемент с обработчиком событий, а внутри обработчика событий. Проблема заключается в том, вероятно, что такой элемент не был вставлен, как у вас есть некоторые проблемы с цитируемость, сделайте это так:

$('#load-text-button').click(function() { 
    $("#text-area").html('Some text <span class="footnote">The Footnote</span> Some other text.'); 
}); 

Answer 2

может быть, я что-то отсутствует, но если вы измените HTML на первый щелчок(), когда вы запрашиваете $ (". footnote"), вы должны найти вновь созданный диапазон. Иногда возникают проблемы с задержкой между модификацией DOM и DOM-запросом, но у вас есть эта проблема, только когда у вас есть свои утверждения один за другим. В вашем случае браузер постоянно обновляется, пока пользователь переходит к # bold-footnote-button. Возможно, проблема в том, что вы используете doublequote для строки и для атрибута class в первом примере.

Проверьте с помощью инструментов разработки браузера, если он правильно присвоит атрибут класса