jQuery單擊時追加div

Question

因此，我正在jQuery中制作此東西，如果用戶單擊按鈕，則會顯示div並要求用戶輸入一些注釋（基本上是便簽功能）。

HTML和CSS正確完成，唯一的問題是jQuery無法正常工作：

    $(document).ready(function() {
    $("#top-tabs ul li").hover(function() {
        $(this).find("ul>li").stop().fadeToggle(400);
    });

    $("#submitpnote").on("click", function() {
        $("body").append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
        $("#pnote-prompt").fadeTo(100, 1);

    });

    $("#confirmpnote").on("click", function() {
        var $pnotetitle = document.getElementById("input-pnote").value;
        var $pnotep = document.getElementById("input-pnote-p").value;
        $("#pnotes-list").append("<div class='pnote-title'><li>" + $pnotetitle + "<br>" + $pnotep + "</li></div>");
        $("#pnoteprompt").remove();
    });

});

js jQuery文件已正確鏈接。 只是在submitpnote函數（第二個）中，div不追加。 我單擊按鈕，但屏幕上沒有任何顯示。 我試過放置一些hint（）調試器，該方法正在運行，但div似乎沒有追加。

有人知道為什么會這樣嗎？ 謝謝！

Answer 1

如我所見，confirmpnote是動態創建的內容，因此您無法執行$（＃confirmnote），因為在執行代碼時該內容將不存在。

對於動態創建的內容，請使用：

(document).on('click', 'selector', function(){
 //to stuff
});

例如，選擇器將是#confirmpnote

Answer 2

看起來您正在動態添加具有submitpnote按鈕的容器，因此您必須使用.on()添加even處理程序。

$('body').on('click', '#submitpnote', function(e){
  $(e.delegateTarget).append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
  $("#pnote-prompt").fadeTo(100, 1);
});