Назначение id в jQuery на лету

Question

Помогите, пожалуйста, понять принцип работы скрипта при изменении id. Вот есть такой код в html:

<button id="hello">
    Вывод сообщения
</button>
<button id="change">
    Изменить вывод
</button>

и скрипт:

    $('#hello').on ('click', function () {
        alert ('Привет!');
    });
    $('#bye').on ('click', function () {
        alert ('Пока!');
    });
    $('#change').on ('click', function () {
        $('#hello').attr('id','bye');
    });

Задумка в том, что при нажатии на кнопку "change" будет меняться id кнопки ("hello" на "bye") и соответственно выводиться другое сообщение. Собственно id меняется, но функция выполняется та, которая назначена для "hello". Почему не подхватывает назначенную для "bye" функцию? Спасибо!

Answer 1

Потому что строчка

$('#hello').on ('click', function () { ...

находит конкретный элемент по id и прикрепляет к нему обработчик события.

А строчка

$('#bye').on ('click', function () { ...

вообще ничего не находит.

$(document).on('click', '#hello', function () {
    alert ('Привет!');
});
$(document).on('click', '#bye', function () {
    alert ('Пока!');
});

БЛОГ НА HUSL

Назначение id в jQuery на лету

Ответы (1 шт):