html代码：

```
<ul class="nav" id="side-menu">
<li><a href="#" id="add1">录入1</a></li>
<li><a href="#" id="add2">录入2</a></li>
<li><a href="#" id="add3">录入3</a></li>
</ul>

<button type="button" class="addinfobtn" id="addRoomInfo">addinfo1</button>

```

js代码：

```
$("#side-menu a").click(function(){
 switch($(this).attr("id")){
   case "add1":
     $(".addinfobtn").text("addinfo1").attr("id", "addRoomInfo");
     break;
   case "add2":
     $(".addinfobtn").text("addinfo2").attr("id", "addServiceInfo");
     break;
   case "add3":
     $(".addinfobtn").text("addinfo3").attr("id", "addMenuInfo");
     break;
 }

$("#addRoomInfo").click(function(){
  console.log($(this).attr("id"));
});

```

result: I change the .addinfobtn id ,but when I click the button, the click function run, and console the id that is already changed. why?