HTML-элемент является нулевым в MVC View

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), и при изменении выбора в раскрывающемся списке происходит событие

Затем у меня есть представление (по умолчанию), называемое 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.

Answer 1

Не уверен, почему это работает с кнопкой, но вы пытались получить доступ к элементу, как это ...

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

EDIT:

Как указано в комментариях, оригинальный постер использовал следующее для решения своих точных задач

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