Почему идентификатор кнопки не обновляется при многократном нажатии в jQuery? ⇐ CSS

[Anonymous]

Добрый день! Я работаю над динамическим изменением идентификатора кнопки при нажатии на другие кнопки. Сценарий следующий:
У меня есть кнопка поиска (#searchButton) и три другие кнопки (#changeButton1, #changeButton2, #changeButton3).
При нажатии на любую из кнопок другие кнопки (#changeButton1, #changeButton2 или #changeButton3), я хочу изменить идентификатор #searchButton, чтобы он соответствовал нажатой кнопке.
Проблема, с которой я столкнулся, заключается в том, что идентификатор #searchButton успешно изменяется с первого раза, но когда я нажимаю другую кнопку (например, #changeButton2 или #changeButton3), идентификатор не обновляется, хотя я вижу изменение в элементе проверки (F12). Обработчик кликов для #searchButton, похоже, не срабатывает после изменения идентификатора.

Код: Выделить всё

Search
Button 1
Button 2
Button 3


$(document).ready(function() {
$('#searchButton').on('click', handleSearchButtonClick);

$('#changeButton1').on('click', function() {
$('#searchButton').attr('id', 'searchButton1');
console.log('ID changed to searchButton1');
});

$('#changeButton2').on('click', function() {
$('#searchButton').attr('id', 'searchButton2');
console.log('ID changed to searchButton2');
});

$('#changeButton3').on('click', function() {
$('#searchButton').attr('id', 'searchButton3');
console.log('ID changed to searchButton3');
});
});

Когда я нажимаю #changeButton1, идентификатор #searchButton меняется на searchButton1. Но после этого, когда я нажимаю другие кнопки, идентификатор #searchButton не меняется, и событие щелчка, похоже, не срабатывает правильно.
Как это исправить? что идентификатор можно изменять динамически при каждом нажатии кнопки?

Подробнее здесь: https://stackoverflow.com/questions/791 ... -in-jquery