jQuery中按钮ID多次点击后无法动态更新的问题求助

问题原因 #

1. ID无法再次更新：第一次修改#searchButton的ID后，该DOM元素的ID已变更，后续点击其他切换按钮时，$('#searchButton')无法找到对应元素，自然无法完成ID修改。
2. 点击事件失效：初始事件绑定基于#searchButton选择器完成，虽然事件本身会保留在DOM元素上，但如果业务逻辑依赖当前ID判断，或后续尝试通过新ID重新绑定事件，就会出现触发异常。

修复方案 #

方案1：使用固定类选择器定位目标按钮 #

给搜索按钮添加一个固定不变的类，通过类选择器替代动态变化的ID来操作元素：

修改后的HTML

<button id="searchButton" class="btn btn-primary search-target">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>

修改后的JavaScript

$(document).ready(function() {
    // 通过固定类绑定点击事件
    $('.search-target').on('click', handleSearchButtonClick);

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

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

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

function handleSearchButtonClick() {
    console.log('Search button clicked, current ID:', this.id);
}

方案2：提前存储DOM元素引用 #

初始时将搜索按钮的DOM元素存入变量，后续直接操作该变量对应的元素，无需依赖选择器：

修改后的JavaScript

$(document).ready(function() {
    // 存储目标按钮的DOM元素引用
    const searchBtn = document.getElementById('searchButton');
    $(searchBtn).on('click', handleSearchButtonClick);

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

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

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

function handleSearchButtonClick() {
    console.log('Search button clicked, current ID:', this.id);
}

额外优化：事件委托适配动态ID #

如果业务需要基于动态变化的ID触发事件，可以使用事件委托，将事件绑定到父元素（或document）上，监听所有匹配特定规则的元素点击：

$(document).ready(function() {
    // 事件委托：监听所有ID以searchButton开头的按钮点击
    $(document).on('click', '[id^="searchButton"]', handleSearchButtonClick);

    // 切换按钮逻辑同方案1或2
});

内容的提问来源于stack exchange，提问作者Authen Tic