附加的html在Javascript中不能全局选择？

我努力想弄清楚什么时候应该使用什么技术。我猜他们只是称之为“学习曲线”

为什么按如下方式编写时，单击功能可以工作：

$(document).ready(function () {

    var Item = {
        list: function() {
            $.getJSON("output.php", function(data) {
                $.each(data, function(key, val) {

                    $("ul#list").append(
                        '<li id="id' + val.id + '" class="itemContainer item' + val.category + '">' +
                        '<div class="item">' +
                            '<button name="plus" type="button" value="0" class="itemPlus">+</button>' +
                            '<button name="minus" type="button" value="0" class="itemMinus">-</button>' +
                        '</div>' +
                        '</li>'
                    );
                });

                $("button").on("click", function() {
                    alert($(this).attr("name"));
                });
            });


        }
    }

    Item.list();


});

$（文档）.ready（函数（）{
变量项={
列表：函数（）{
$.getJSON（“output.php”，函数（数据）{
$。每个（数据、函数（键、值）{
$（“ul列表”）。附加(
“
”+
'' +
'+' +
'-' +
'' +
“
”
);
});
$（“按钮”）。在（“单击”，函数（）{
警报（$（this.attr（“name”））；
});
});
}
}
Item.list（）；
});

但不是这样的：（注意，我把$（“按钮”）移到了对象外的…上）

$（文档）.ready（函数（）{
变量项={
列表：函数（）{
$.getJSON（“output.php”，函数（数据）{
$。每个（数据、函数（键、值）{
//用于Items.jQuery UI模板的HTML？
//选择列表的起始位置
$（“ul列表”）。附加(
“
”+
'' +
'' +
''+val.title+''+
'' +
“
”+val.desc+”
'+
“
”+
“
1租金美元+val.price+”
'+
'+' +
'-' +
'' +
“
”
);
});
});
}
}
Item.list（）；
$（“按钮”）。在（“单击”，函数（）{
警报（$（this.attr（“name”））；
});
});

我不知道是jQuery选择器需要在里面，还是单击函数本身。如果您能帮助理解这一点，我们将不胜感激。有没有更好的方法来编写这样的代码

任何关于js代码编写风格的建议都将不胜感激，因为我感觉我的代码太可怕了

提前谢谢

$(document).on("click", "button", function() {
    alert($(this).attr("name"));
});

---

您已经动态地附加了元素。他们应该被委派。所以，用上面的方法让他们工作。

像这样试试。这是一个需要授权的注入内容

$("ul#list").on("click", "button", function() {
     alert($(this).attr("name"));
});

---

正是这些简单的事情让我的头发变白了。谢谢你的帮助！

$("ul#list").on("click", "button", function() {
     alert($(this).attr("name"));
});