AJAX添加的HTML元素没有添加到DOM中？

Question

这是初始页面：

以下是点击链接后的效果。

检查源代码后，似乎没有放入元素。那里应该有一个div？

以下是点击链接时运行的代码：

public ActionResult GetStatus()
{
    return Content("<div>Status OK - " + DateTime.Now.ToLongTimeString() + ".</div>");
}

我正试图通过使用此Javascript将<div> div中的每个新添加的#status淡入视图：

<script type="text/javascript">
    function Update() {
        $("#status").first().hide().fadeIn();
    }
</script>

@Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions { UpdateTargetId = "status", InsertionMode = InsertionMode.InsertBefore, OnSuccess = "Update"})

但是，每次单击该链接时，都会获取并正确添加值，但#status的所有内容都会淡入查看。

我猜这是因为源代码没有使用新添加的项进行更新，而.first（）方法找不到它应该是什么。

有什么想法吗？

Answer 1

直接查看源时，不会出现对DOM的JavaScript更改，因为view-source会新加载页面。要查看JS更改，您必须使用检查工具，对于Firefox，有Firebug。 Chrome有一个内置工具，右键单击div并选择“Inspect element”。

Answer 2

如果您只想显示第一个封闭的div，请执行以下操作：

$('#status').children().hide().first().fadeIn();

如下：http://jsfiddle.net/MarkSchultheiss/AeVnp/

Answer 3

id="status"不能有多个DOM对象。如果您不止一次重复此代码，那么这是一个问题。如果您想拥有其中的几个，请将标识符更改为类，然后.first()调用将有所帮助。

$("#status")永远不会返回多个对象。而且，如果你有多个id="status"的对象，那么从浏览器到浏览器，你得到的对象就会不一致，因为它是非法的HTML。

将HTML更改为：

<div class="status">No Status Yet.</div>

然后你就可以使用这个jQuery了：

$(".status").first().hide().fadeIn();

---

编辑：事实证明OP不想要第一个状态div，他们想要状态div中的第一个子div。问题中的信息不足以让任何回答者知道，直到很多很多评论来回交换。所以，正确的答案与取第一个孩子有关。

$("#status").children().first().hide().fadeIn();

Answer 4

选择具有ID的节点时，您不需要first()，因为反正应该只有一个节点。

$("#status").hide().fadeIn();

话虽如此，你在哪里填充$('#status')内的html？什么是InsertionMode = InsertionMode.InsertBefore？为什么不使用$.ajax()？

function Update() {
    $.ajax({
        url: 'update_status.php',
        type: 'get',
        dataType: 'text',
        success:function(data){
            $('#status').hide().html(data).fadeIn();
        }
    });
}

$('#my_update_button').click(function(){
    Update();
});