JQuery 单击事件不会触发

我正在做一个项目，我使用 ajax 将内容加载到页面中。

我的jquery函数是：

function load_room() {
    var sem = 0;
    $.ajax({
        url: 'ajax/room_ajax.php?option=2',
        type: 'POST',
        data: { 'sem': sem },
        dataType: "json",
        success: function (data) {
            console.log(data[0]);
            $("#room").html("");
            for (var i = 0; i < data.length; i++) {
                var x = i + 1;
                $("#room").append("<tr><td>" + x + "</td><td>" + data[i]['room_name'] + "<td><a id='edit' href='#'>edit</a></td></tr>");
            };
        }
    });
}

内容完全加载成功，但是当我单击<a id='edit' href='#'>edit</a> 元素，它不会触发相应的单击事件。代码是这样的：

$('#edit').on('click', function(){
    alert("hai")
});