javascript - JQuery 和 Ajax 调用新创建的元素

Question

我是 Ajax 和 JQuery 的新手，阅读了大量书籍，但找不到适合我的解决方案。

我有一个 JQuery on.click通过 Ajax 触发调用函数更新我的页面而不完全重新加载它。但是，这些正在创建的新元素也无法触发此功能。

下面的函数实质上添加了一个 <tr>到 table 的结尾.这个新<tr>的 <a>添加的元素在添加后不能触发相同的功能。

$("a.add-department").on( "click", function(e) 
{
    e.preventDefault();

    bootbox.dialog({
        message: '<form class="form-horizontal row-border"><div class="form-group"><label class="col-md-2 control-label">Name:</label><div class="col-md-10"><input type="text" id="department-name-add" value="" class="form-control"></div></div></form>',
        title: "Add a Department",
        buttons: {
            success: {
                label: "Add",
                className: "btn-success",
                callback: function() {
                    var name = $("#department-name-add").val();;
                    $.ajax({
                        type: "POST",
                        url: "/departments/add",
                        dataType: "json",
                        data: 'name=' + name,
                        success: function(result){
                            if (result.success == 1)
                            {
                                $('#table-departments > tbody:last').append('<tr id="'+result.id+'"><td id="td-'+result.id+'">'+result.name+'</td><td id="td-actions-'+result.id+'"><a data-name="'+result.name+'" data-id="'+result.id+'" data-toggle="modal" class="btn btn-xs btn-danger delete-department confirm-dialog">Delete</a> <a id="a-edit-'+result.id+'" data-name="'+result.name+'" data-id="'+result.id+'" data-toggle="modal" class="btn btn-xs btn-primary edit-department">Edit</a></td></tr>');
                            }
                        },
                        error: function(result){
                        }
                    });
                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function() {
                    console.log('Cancelled Request');
                }
            },
        }
    });
});

我尝试了使用 .on 与仅使用 .click 以及将 id 绑定(bind)到每个元素的组合。

有什么想法吗？

另外，我知道代码很可能被认为是丑陋的，我只是想了解如何解决这个问题。

谢谢

Answer 1

您需要改用事件委托(delegate)。这样添加的新元素可以触发事件。

这里是一个链接，可以了解更多关于事件委托(delegate)的信息:http://learn.jquery.com/events/event-delegation/ 事件委托(delegate)如下所示:

$(document).on("click", "a.add-department", callback)