JQuery将事件添加到动态创建的元素中

时间:2014-07-28 19:30:25

标签: javascript jquery

我知道之前有人问过,但我似乎无法弄清楚我做错了什么。

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

http://jsfiddle.net/XGb7w/1/

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

});

谢谢。

1 个答案:

答案 0 :(得分:1)

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

http://jsfiddle.net/fbNY9/

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

});