当我单击按钮时,出现新按钮并且它不起作用

when i click button,new button appears and it doesn't work

当我单击按钮时,我想向我的 db.So 添加新注释。当我单击 add_note 按钮时,会出现一个文本框和保存按钮。当我单击保存按钮时,没有任何变化。我检查了网络控制台,但没有错误。我该怎么办?

jquery

$("#add_note").each(function() {
    $(this).on("click", function() {
        $("#not").html('<input type="text" id="note" />');
        $("#buton").html('<button  class="btn btn-primary btn-sm " id="save">Save</button>');

    });
});


$("#save").each(function() {
    $(this).on("click", function() {
        alert("dsfasdfasdfasd");
    });
});

html

<td id="not"></td>
<td id="buton">
    <button class="btn btn-primary btn-sm " id="add_note"> Add New Note</button>
</td>

我在 HTML 中是独一无二的。对 DOM

中动态添加的元素使用 事件委托
 $("#buton").on('click', '#save', function(){
   alert("dsfasdfasdfasd");
 });