Изменить CSS элемента динамического списка

===ОБНОВЛЕНИЕ===

Если я удалю стиль="display: none;из шаблона и примените приведенный ниже метод, как рекомендовано ниже, пустой контейнер срабатывает при нажатии на любой другой элемент списка. Что еще можно сделать?

У меня есть список ul, который динамически создается во время выполнения с использованием jQuery и JSON (использование встроенного HTML — это шаблон). Мне нужно, чтобы фоновый стиль CSS менялся, когда пользователь щелкает элемент списка (#navItem). Я перепробовал все под луной, о чем только мог подумать, от встроенного класса до .appentTo() и т. д.То, что у меня есть ниже, отлично работает для жестко закодированных элементов, но ничего не работает с динамически загружаемым контентом. Что еще более запутанно, так это то, что классы в элементах внутри тега li инициируют...???

Будем признательны за любую помощь. Ниже приведены фрагменты моего кода. Спасибо.

HTML:

<div id="navScrollContainer" class="navContentPosition">
    <ul id="navContent">
    // Display as 'None' to prevent a empty containter from showing -->
        <li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
            <a class="navA">
            <h1 class="navH1">.</h1>
            <h2 class="navH2">.</h2>
            <p class="navP">.</p>
            <hr class="navHR" />
        </li>
    </ul>
</div>
<script type="text/javascript">
    $('#navScrollContainer').on('click', '.ulFx', function() {
        $(this).addClass("liFx");
    });
</script>

Это функция, которая вводит данные в DOM в виде списка:

function loadNav(url, container, appendE) {
    $.getJSON(url, function(data) {

        $.each(data.items, function() {
            var newItem = $('#' + container).clone();
            // Now fill in the fields with the data
                    newItem.addClass('ulFx');
            newItem.find("h1").text(this.label);
            newItem.find("h2").text(this.title);
            newItem.find("p").text(this.description);
            newItem.find("a").attr("href", this.gotoURL);
            newItem.children().appendTo('#' + appendE);
        });

        $('#navHeaderTitle').text(data.listTitle);
        iniScroll('scrollNav', 'navScrollContainer');
        var target = data.targetKey;
        // transition("#" + pageName, "show");
    });
};

CSS, который должен произойти (только для этого элемента), когда пользователь щелкает элемент:

@-webkit-keyframes
liBG {from {
    background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
    background-color: transparent
}
}

.liFx {
    -webkit-animation-name: liBG;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
}

Атрибуты класса, присвоенные элементам li:

.navH1 {
    font-size: 18px;
    color: #FFA500;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 15px;
}
.navH2 {
    font-size: 16px;
    color: #999999;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 25px;
    font-weight: bold;
}
.navP {
    color: #888;
    font-size: 14px;
    text-align: justify;
    margin-top: 5px;
    margin-bottom: 16px;
    margin-left: 25px;
    margin-right: 10px;
}
.navA {
    text-decoration: none;
}
.navHR {
    border: none;
    background-color: #336;
    height: 1px;
}