如何根据条件修改元素id属性并让jQuery事件正常触发？

你的问题核心在于事件绑定的时机：页面加载完成后，$('#update').click(...)和$('#update1').click(...)这类代码会立即执行——可当时页面上只有id="update"的按钮，update1和update2元素根本不存在，所以这两个事件其实没绑定到任何元素上。等你后续修改按钮ID后，新ID对应的事件并没有自动绑定到这个按钮上，自然不会触发。

下面给你两种实用的解决方案：

方案一：使用事件委托（推荐） #

事件委托是把事件绑定到父元素（比如document或更接近的容器）上，通过监听事件冒泡来触发目标元素的逻辑。这种方式对动态修改属性的元素依然有效，因为它是基于事件触发时的元素状态来判断的。

修改后的代码如下：

JavaScript 代码 #

$('#save').click(function(){
    console.log(this.value);
    if(this.value == 1){
        $("#update").attr('id','update1');
    } else{
        $("#update").attr('id','update2');
    }
    console.log($('.update').attr("id"));
});

// 用事件委托监听点击，匹配所有可能的ID
$(document).on('click', '#update, #update1, #update2', function(){
    const currentId = $(this).attr("id");
    console.log(currentId);
    // 根据当前ID执行对应逻辑
    currentId === 'update1' ? console.log("hello update1") : console.log("hello update");
});

HTML 代码（无需修改） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textfield" type="text" placeholder="Enter">
<button id ="save" value= "1">save</button>
<button id ="update" class="update">Update</button>

这种方式不用关心元素ID什么时候变化，只要点击时元素ID符合条件，就能触发对应逻辑，代码更简洁健壮。

方案二：修改ID后重新绑定事件 #

如果你坚持要分开绑定不同ID的事件，可以在修改ID后，先解绑原有事件，再重新绑定对应ID的事件（这种方式相对繁琐，不如事件委托优雅）：

$('#save').click(function(){
    console.log(this.value);
    const updateBtn = $("#update, #update1, #update2");
    // 先解绑所有之前的点击事件
    updateBtn.off('click');
    
    if(this.value == 1){
        updateBtn.attr('id','update1');
        // 重新绑定update1的事件
        $('#update1').click(function(){
            console.log($(this).attr("id"));
            console.log("hello update1");
        });
    } else{
        updateBtn.attr('id','update2');
        // 重新绑定update2的事件
        $('#update2').click(function(){
            console.log($(this).attr("id"));
            console.log("hello update");
        });
    }
    console.log(updateBtn.attr("id"));
});

// 初始绑定update的事件
$('#update').click(function(){
    console.log($(this).attr("id"));
    console.log("hello update");
});

额外建议：尽量避免动态修改ID #

其实动态修改元素ID并不是最佳实践，你可以用data-*属性来区分状态——不用修改ID，直接根据这个属性判断执行逻辑，代码会更清晰：

$('#save').click(function(){
    console.log(this.value);
    const updateBtn = $(".update");
    if(this.value == 1){
        updateBtn.attr('data-status','update1');
    } else{
        updateBtn.attr('data-status','update2');
    }
    console.log(updateBtn.attr("data-status"));
});

$(".update").click(function(){
    const status = $(this).attr("data-status");
    console.log(status);
    status === 'update1' ? console.log("hello update1") : console.log("hello update");
});

内容的提问来源于stack exchange，提问作者vikas kumar