Измените значение / содержимое div, который загружается с помощью метода .after, в jquery

Question

Я знаю, что это простой вопрос, но мне было трудно решить этот вопрос.

Текст под элементом кнопки генерируется после загрузки DOM. Вывод должен иметь случайную строку после нажатия кнопки. Я узнал, что следует использовать привязку делегирования, поэтому я использую метод on. Однако мой код не работает.

Вот jsfiddle

HTML

<button class="btn123" id="btn">Click Here</button>

jQuery

$(document).ready(function()
{
   $('.btn123').after('<br/><div id="textNi"><span style="font-family: &quot;georgia&quot; , 
               &quot;times new roman&quot; , serif;"><span style="color: #660000;">Sample ra 
               ni</span></div></span>');
});

$('#btn').on('click', '#textNi', function()
{
   $(this).text(Math.random().toString(36).substring(7));
});

Answer 1

Ваша сгенерированная разметка будет выглядеть примерно так:

└┬ #btn
 └ #textNi

#textNi не является потомком, найденным в #btn, но вместо этого является родным братом - поэтому ваш обратный вызов никогда не сработает , Если вы посмотрите документацию .on() , она говорит, что второй аргумент:

Строка селектора для фильтрации потомков выбранных элементов, которые инициируют событие.

Вы просто выбираете вместо #textNi:

$('#btn').on('click', function() {
   $('#textNi').text(Math.random().toString(36).substring(7));
});

Answer 2

Я отредактировал код:

$('#btn').on('click', function()
{
    $('#textNi').text(Math.random().toString(36).substring(7));
});