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与每个元素捆绑在一起。

有什么想法吗？

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

由于

Answer 1

您需要使用事件委派。这样添加的新元素就可以触发事件。

以下链接可了解有关事件委派的更多信息：http://learn.jquery.com/events/event-delegation/ 事件委托如下：

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

Answer 2

如果元素是通过ajax动态加载的，你必须做event delegation，因为你在表{id} {{}}中附加html，你可以这样使用：

table-departments

和编辑：

$("#table-departments").on("click", "a.add-department", function(){



})

JQuery和Ajax调用新创建的元素

2 个答案: