动态创建的按钮不会触发功能

Question

我有一个下拉列表，我通过 js 将按钮附加到该列表中。一切正常，但我无法让我的按钮执行其 onclick 操作。

这里是生成按钮的代码：

      function (data) {
                        $("#pop-up").css("display", "none");
                        $("#pop-up").empty();
                        $("#pop-up").append("<p class=search-top>titles</p>");

                        if (data.title4) {
                            $("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button4')' id=pop-button4>"+data.title4+"</b>")
                        }
                        if (data.title3) {
                            $("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button3')' id=pop-button3>"+data.title3+"</b>")
                        }
                        if (data.title2) {
                            $("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button2')' id=pop-button2>"+data.title2+"</b>")
                        }
                        if (data.title1) {
                            $("#pop-up").css("display", "block");
                            $("#pop-up").append("<b onmousedown='event.preventDefault()' id=pop-button1>"+data.title1+"</b>")}

我尝试了 js 和 jquery 但无法让它们工作，我尝试的最后一个功能是：

 $('#pop-button1').on('click', function(){
        console.log("here")
    });

它什么都不做。

Answer 1

将您的回调更改为：

$(document).on('click', '#pop-button1', function(){ 
    console.log("here");
});

通过这样做，您可能会实现您正在寻找的东西。