c# - MVC View 中的 Html 元素为空

Question

我已经开始着手我的第一个 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) 的部分 View (控件)，并且在下拉列表中的选择更改时触发一个事件

然后我有一个名为 TalentOverview 的 View (默认)，它监听触发的事件；

    $(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 处理。

Answer 1

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

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

编辑:

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

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