MVC 视图中的 Html 元素为空答案

【问题标题】：Html element is null in MVC ViewMVC 视图中的 Html 元素为空
【发布时间】：2011-07-25 16:16:10
【问题描述】：

我已经开始了我的第一个 mvc 项目，也是第一次使用 jquery。我遇到的一些行为让我很困惑。我有一个具有以下结构的母版页；

    <div id="main">
        <div class="clsLeftPane">
            <% Html.RenderPartial("SubMenu"); %>
        </div>
        <div class="clsRightPane">
            <div class="clsBody">
                <% Html.RenderPartial("TalentSelection"); %>
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </div>  
        </div> 
    </div>

我有一个带有下拉列表 (TalentSelection) 的部分视图（控件），并且在下拉列表中的选择更改时触发一个事件

然后我有一个名为 TalentOverview 的视图（默认），它监听触发的事件；

    $(document).bind('talentChanged_Event', function (event, data) { HandleEvent(data); });


function HandleEvent (data) {
    lblTalentAwareness.innerHTML = data.Awareness;

    var perfAttr = [{"<Caption>k__BackingField":"Interesting","<QuestionId>k__BackingField":8,"<Score>k__BackingField":64.00},{"<Caption>k__BackingField":"Similar to me and my friends","<QuestionId>k__BackingField":13,"<Score>k__BackingField":55.00},{"<Caption>k__BackingField":"Attractiveness","<QuestionId>k__BackingField":11,"<Score>k__BackingField":54.00}]

    jQuery.each(perfAttr, function(i, val) {
        CreateItem(val[i]);
    });
}

function CreateItem(name) {
    var listItem = document.createElement('li');
    listItem.setAttribute('id', 'listitem');
    listItem.innerHTML = 'item';

    highAttrs.appendChild(listItem);
}

</script>
<button id="btnClick" onclick="CreateItem('item')"></button>
<h1><%: ViewData["Message"] %></h1>
<p>
    <asp:Label ID="lblAwareness" runat="server" Text="Awareness  "/>
    <label id="lblTalentAwareness"/>
</p> 
<h4>High Performing Attributes</h4>
<ul id="highAttrs">
    <li>test</li>
</ul>

触发事件时，TalentOverview 调用一个名为 HandleEvent 的函数并将一些项目 (li) 添加到列表 (ul) 中。（请注意某些值是硬编码的，以帮助测试）

现在的问题是，每次触发事件时，代码错误都会声称“highAttrs”为空。但是，在调查时，我还创建了一个按钮，该按钮在单击事件时调用相同的函数，并且运行良好，没有任何错误。

我很困惑为什么我会得到不同的行为。我在这里误解了一些基本的东西。我会假设我的页面元素在用户进入页面时呈现一次，之后所有事件都将由 JQuery 处理。

【问题讨论】：

标签： c# jquery model-view-controller

【解决方案1】：

不确定为什么它可以与按钮一起使用，但您是否尝试过像这样访问元素...

$("#highAttrs").appendChild(listItem);

编辑：

如 cmets 中所述，原始发布者使用以下内容来解决他的确切需求

$("#highAttrs").append(listItem);

【讨论】：

你几乎是对的，我不得不使用 $("#highAttrs").append(listItem);