Change CSS of Dynamic List Item
Question by Andaero
===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 by Andaero
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);
});
Answer by Starx
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
});
