为什么在jQuery中多次点击按钮的ID不更新？

Question

美好的一天！我正在研究在单击其他按钮时动态更改按钮的 ID。场景如下：

我有一个搜索按钮 (#searchButton) 和其他三个按钮 (#changeButton1、#changeButton2、#changeButton3)。 单击任何其他按钮（#changeButton1、#changeButton2 或 #changeButton3）时，我想更改 #searchButton 的 ID 以匹配单击的按钮。 我面临的问题是 #searchButton 的 ID 第一次更改成功，但是当我单击另一个按钮（例如 #changeButton2 或 #changeButton3）时，ID 不会更新，即使我可以看到更改检查元素 (F12)。 ID 更改后，#searchButton 的点击处理程序似乎没有被触发。

<button id="searchButton" class="btn btn-primary">Search</button>
<button class="btn btn-secondary" id="changeButton1">Button 1</button>
<button class="btn btn-secondary" id="changeButton2">Button 2</button>
<button class="btn btn-secondary" id="changeButton3">Button 3</button>

<script>
$(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');
    });
});
</script>

当我单击#changeButton1时，#searchButton的ID更改为searchButton1。但之后，当我单击其他按钮时，#searchButton 的 ID 没有更改，并且单击事件似乎没有正确触发。

如何解决此问题，以便每次单击按钮时都可以动态更改 ID？

Answer 1

一旦更改ID，您将无法再通过原ID访问该按钮。即

$('#searchButton')

不会返回您的搜索按钮，因为它现在的 ID 为

searchButton1

。

我建议将搜索按钮存储为变量以避免此问题。即

const searchButton = $('#searchButton');
searchButton.on('click', handleSearchButtonClick);

再往下：

searchButton.attr('id', 'searchButton1');
/* etc */
searchButton.attr('id', 'searchButton2');
/* etc */
searchButton.attr('id', 'searchButton3');