更改动态列表项的CSS

Question

===UPDATE===

If I remove the style="display: none; from the template and apply the below method as recommended below, the empty container fires when you click on any other list item. What else can be done?

I have an ul list that is dynamically created at run time using jQuery and JSON (Using inline HTML is a template). I need the background CSS style to change when a user clicks on a list item (#navItem). I've tried everything under the moon that I can think of from inline class to.appentTo(), etc. What I have below works fine for hard-coded elements but Nothing seems to work with dynamically loaded content. Whats even more confusing is that the classes in the elements within the li tag initiate...???

Any help would be appreciated. Below are my code snippets. Thnx.

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>

This is the Function that injects the data into the DOM as a list:

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");
    });
};

The CSS that need to happen (only on that item) when the user clicks on a Item:

@-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;
}

The Class atributes given to the li items:

.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;
}

Answer 1

This will watch for dynamic elements:

$(".liFx").live("click", function() {
  $(this).addClass("liBG");
});

Answer 2

Without seeing your click handler, I can only speculate. However, generally when the problem is related to dynamic content and having them respond to stimulus, the problem lies in how you are attaching the handler.

If you use .click() , or .trigger('click') , the handler will be applied directly to the elements you are calling these functions on. That means that if the elements do not currently exist, they will not receive a handler.

The way to get around this, is to attach the event listener to a parent element that will always exist and then watch for the event propagating up from the dynamic child element. You could do this manually, by looking at the event.target , but jQuery, as usual, makes this easy for us.

The modern jQuery way of doing this is using .on() ( documentation ):

$('#someparent').on('click', '#childselector', function() {
   // my handler code
});

jQuery then attaches a handler on #someparent , and when it sees a click that was targeted at #childselector , it fires.

If you want to apply a class to a child of #navContent , and #navContent will always exist, do this:

$('#navContent').on('click', 'li', function() {
     $(this).addClass("liFx");
});

If #navContent is dynamic too, simply go higher in the DOM tree.

As a side note, I notice that the li has an id of navItem . This sounds an awful lot like a class, rather than an ID. If you are going to have more than one navItem , they cannot all have the same ID. This is what classes are for:

<li class="navItem liFx" style="display: none;">

Answer 3

I am not sure where is the problem, but you are trying to do something as such:

$("#navlink").on('click', function() {
     $("#yourselector").css("backgroundColor", "#ddd"); //change the color
});

Answer 4

I added another div and an addClass() method to my function along with Jeff B's answer above . If the class is hard coded into the tag, it doesnt function.

<ul id="navContent">
    <li id="navItem" style="display: none;">
        <div>//ADDED THIS TAG TO EXCEPT THE CLASS
            <a>
                <h1>.</h1>
                <h2>.</h2>
                <p>.</p>
                <hr/>
            </a>
        </div>
    </li>
</ul>

In my js file:

$.each(data.items, function() {
    var newItem = $('#' + container).clone();
    // Now fill in the fields with the data
    newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
    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);
});