Javascript ASP MVC视图添加了ajax-isn'；在浏览器页面源中不可见

这个问题让我发疯了两天。
我有带文本区域的强类型视图。用户可以在那个区域写评论。单击按钮后，我保存注释并使用注释id和注释文本从操作方法返回视图。返回了我添加到div的名为“messages”的视图，它可以正常工作。已保存评论，返回视图，显示良好，但当我在浏览器中右键单击页面源时，“消息”为空 这件事让我很烦恼。每个评论都有编辑按钮，当我单击编辑时，如果messages div中有5条评论，我将得到名为5次的编辑功能。但是，当我在div消息中硬编码带有注释的HTML时，它是有效的。但是，当我打开ajaxify页面时，任何东西都无法正常工作。
代码如下：

<script>
    $(function () {
        $('#addMessageForm').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {                    
                    $('#messages').prepend($(result).fadeIn('slow'));                    
                }
            });
            return false;
        });
    });
</script>

@using (Html.BeginForm("AddMessage", "Comment", FormMethod.Post, new { id = "addMessageForm" }))
{
    @Html.TextAreaFor(a => a.CommentText);
    <input type="submit" value="Submit Comment" />
}

<div id="messages">
</div>

这就是我单击“编辑”按钮时发生的情况。但正如我在div消息中添加硬代码注释div并单击edit时所说的，只调用了一次。我不知道这里发生了什么？为什么页面源在浏览器中不显示任何内容

这是评论视图。这是我添加到div消息中的内容

@model Demo_AjaxPosting.Models.CommentModel
@{
    Layout = null;
}
<script src="../../json2.js" type="text/javascript"></script>
<script>
    $('.editButton').live('click', function (e) {
        e.preventDefault();

        var container = $(this).closest('div');  //$(this).closest('.commentWrap');
        var itemId = container.attr('id');
        alert(itemId);
        var nestId = '#' + itemId;

        var txt = $(nestId + ' #commentTextValue').text();

        $(nestId + ' #commentTextValue').remove();
        $(nestId + ' #editButton').remove();
        $(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>');
        $(nestId).append('<input type="submit" value="Ok" class="btnOk" />');
    })
</script>

    <div style="border: 1px solid #dddddd;">
        @Html.ActionLink(@Model.Author, "SomeAction") @Model.CommentId
        <div class="commentWrap" id="@Model.CommentId">
            <p id="commentTextValue">@Model.CommentText</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>

@model Demo\u AjaxPosting.Models.CommentModel
@{
布局=空；
}
$（'.editButton'）.live（'click'，函数（e）{
e、 预防默认值（）；
var container=$（this.closest（'div'）；//$（this.closest（'.commentWrap'）；
var itemId=container.attr（'id'）；
警报（itemId）；
变量nestId='#'+itemId；
var txt=$（nestId+'#commentTextValue'）.text（）；
$（nestId+'#commentTextValue'）.remove（）；
$（nestId+“#editButton”）.remove（）；
$（nestId）.prepend（“”+txt+“”）；
$（nestId）.append（“”）；
})
@Html.ActionLink（@Model.Author，“SomeAction”）@Model.CommentId
@Model.CommentText

页面源显示最初从服务器接收到的页面。DOM是从源创建并显示的。如果以后（使用jQuery）向DOM添加注释，将显示注释，但不会更新页面源。到目前为止，这是预期的行为

如果要在添加注释后检查HTML，请使用Firebug之类的工具。它可以在DOM上工作，并且可以很好地处理动态部分

事件处理程序执行多次的原因是您多次添加它。每次添加注释时，Ajax应答都会传输（并由浏览器执行）一个带有以下行的脚本：

$('.editButton').live('click', function (e) {

结果，您最终安装了多个事件处理程序。它们可能有相同的代码。但这并不重要。它们被安装了好几次。因此，如果您单击“编辑”链接，将执行其中的几个链接，并获得几个文本框

---

解决方案是将Javascript代码（包括脚本标记）移出CommentView，进入主页的视图。

页面源显示最初从服务器接收到的页面。从源代码创建并显示DOM。如果以后（使用jQuery）向DOM添加注释，将显示注释，但不会更新页面源。到目前为止，这是预期的行为。关于“编辑”链接：请显示“CommentView”的源代码和相关的Javascript代码。这就是你的问题所在。我已经更新了问题。我无法从你的问题中分辨编辑按钮处理程序代码的确切位置。但我猜每次动态添加注释时，代码都会运行。这样，您将在三个编辑按钮的每个按钮上安装三个事件处理程序。这就解释了为什么要运行三次。正确的方法是在最初从服务器加载页面时安装一次事件处理程序。吼叫的形象$（'.editButton'）.live（'click'，函数（e）{…是当我点击编辑按钮时的事件。最后一段代码由两部分组成：第一行安装事件处理程序，其余的行是事件处理程序本身。现在我的问题基本上是：第一行何时运行？页面传输时一次还是每次添加新的推荐？dishh…我真的需要加速多花点时间学习客户端编程。谢谢：）

$('.editButton').live('click', function (e) {