Javascript JQuery向动态创建的元素添加事件

我知道以前有人问过这个问题，但我似乎不知道我做错了什么

我只是尝试创建一些动态元素，然后仅使用JQuery将事件附加到它们。 这些按钮应该会发出警报

$（函数（）{
$（'#add'）。on（“单击”，function（）{addItem（）}）；
函数addItem（）{
var listItem='
'+'+'
'；
$（'ul'）。追加（列表项）；
}
$（'.crosstn'）。打开（“单击”，函数（）{
alert（）//不发出警报为什么不？
});
$（'.checkBtn'）。打开（“单击”，函数（）{
alert（）；//不发出警报为什么不？
})
});

---

谢谢。

如果在文档级别设置on处理程序，则可以执行此操作

$（函数（）{
$（'#添加'）。在（“单击”，函数（）{
addItem（）；
});
函数addItem（）{
var listItem='
'+'+'
'；
$（'ul'）。追加（列表项）；
}
$（文档）。在（“单击”、“.crosstn”上，函数（）{
alert（）；//不发出警报为什么不？
});
$（文档）。在（“单击“，”.checkBtn'，函数（）{
alert（）；//不发出警报为什么不？
});
});

给你，你有3个

$(function(){   

    $('#add').on("click",function(){addItem()});


    function addItem() {
        var listItem = '<li>' +  '<button class="checkBtn"></button>' + '<button class="crossBtn"></button>' + '</li>';
        $('ul').append(listItem);
    }


    $('.crossBtn').on("click", function() {
        alert() // Doesn't alert why not?
    });



    $('.checkBtn').on("click", function() {
        alert();// Doesn't alert why not?
    })

});

$(function () {

    $('#add').on("click", function () {
        addItem();
    });

    function addItem() {
        var listItem = '<li>' + '<button class="checkBtn" />' + '<button class="crossBtn" />' + '</li>';
        $('ul').append(listItem);
    }

    $(document).on("click",".crossBtn", function () {
        alert(); // Doesn't alert why not?
    });

    $(document).on("click",'.checkBtn', function () {
        alert(); // Doesn't alert why not?
    });

});