jqueryでIDを変更する：なぜ機能しないのですか？

Question

私は<input type="button" id="avvia_timer" value="AVVIA" />にIDを変更するには、このコードを使用します。

$("#avvia_timer").click(function() { 
    $(this).val("INIZIA"); 
    $(this).attr("id", "inizia_timer"); 
}); 

私はその後、私は警告して「ID」を表示したい$(this).attr("id", "inizia_timer"); でIDを変更しますが、新しいID

で要素をクリックをしています

$("#inizia_timer").click(function() { 
    alert($(this).attr("id")); 
}); 

これは機能しません。どうして？どうすれば修正できますか？

HTMLコード：

<div id="timer"> 
    <input type="button" id="avvia_timer" value="AVVIA" /> 
    <input type="button" id="stop_timer" value="FERMA" /> 
    <span id="tempo_timer">Timer</span> 
</div> 

Answer 1

アラートボックスに来ているものをid

$("#avvia_timer").click(function() { 
 
    $(this).val("INIZIA") 
 
    .attr("id", "inizia_timer") 
 
    .on("click", function() { 
 
     alert(this.id) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="timer"> 
 
    <input type="button" id="avvia_timer" value="AVVIA" /> 
 
    <input type="button" id="stop_timer" value="FERMA" /> 
 
    <span id="tempo_timer">Timer</span> 
 
</div>