使用jQuery on()连接click事件不会通过Ajax调用触发注入的HTML

我有一个局部视图,它是通过一个带有html数据类型的Ajax调用返回的 – 在这个html里面是一个带有id的锚标签,我使用jQuery的.on()API和版本1.7.1来连接点击事件框架.

为简洁起见,想象部分视图如下：

<div id="container" class="modal-dialog">
    <h1>heading</h1>
    <a id="thelink" href="#">
        <img src="<%:Url.Content("~/Path/To/Image.jpg")%>" /></a>
</div>

..并通过一个标准的$.ajax POST到一个MVC控制器动作,它返回上面的部分视图结果,我拦截并吐入模态对话框.

我试图连接的事件代码如下所示：

$(function () {
    $("#thelink").on("click",function (e) {
        e.preventDefault();
        $("#jquery-ui-dialog-Box").dialog("close");
    });
});

现在,如果我将on()切换为live() – 一切都按预期工作.使用上面的代码虽然在IE8(IE8标准模式)中事件没有触发 – 断点没有被击中,jQuery UI模式没有按照上面的例子关闭.但是通过live()调用,它们都按预期工作.

这是我第一次也是唯一一次看到on()的行为与不推荐使用或’卷起’事件绑定API(委托,实时,绑定)之间的差异.

我没有回复使用live()或delegate()的问题,但想了解为什么会发生这种情况,如果可能的话！

问候
SB

$(function () {
    $(document).on("click",'#thelink',function (e) {
        e.preventDefault();
        $("#jquery-ui-dialog-Box").dialog("close");
    });
});