javascript - 对于新的动态创建的元素，单击事件不会持续存在

Question

我有一些附加到类的单击事件的代码：

$(".filter-link").click(function (e) {
    $("#filter").dialog("option", "position",
                    { my: "left top", at: "left bottom", of: e });
    $("#filter").dialog("open");
});

我使用它的元素经常动态重新创建：

function addTopLinks() {
    $('#calendar .fc-view thead th.fc-resourceName')
        .removeClass('top-calendar-cell');
    $('#calendar .fc-view thead th.fc-resourceName')
        .addClass('top-calendar-cell');
    $('#calendar .fc-view thead th.fc-resourceName')
        .html('<a class="filter-link" href="#">Filter Resources</a>');
};

有什么方法可以让点击持续存在，还是每次重新创建元素时我都会被迫重新分配点击？

谢谢

Answer 1

使用.on()：

$(document).on("click", ".filter-link", function (e) {
     $("#filter").dialog("option", "position",
            { my: "left top", at: "left bottom", of: e });
     $("#filter").dialog("open");
});