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 没有附加。我单击按钮，但屏幕上没有显示任何内容。我试过放置一些 prompt() 调试器，方法是运行但 div 似乎没有附加。

有谁知道为什么会这样？谢谢！

Answer 1

据我所知，confirmpnote 是动态创建的内容，因此您不能执行 $(#confirmnote)，因为在执行代码时它不存在。

对于动态创建的内容使用：

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

选择器例如#confirmpnote

Answer 2

看起来您正在动态添加具有 submitpnote 按钮的容器，因此您必须使用 .on()

添加偶数处理程序

$('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);
});

jQuery 点击后追加 div

jQuery append div on click

html

javascript

jquery

append