I'm using ajax to dynamically populate a menu. The problem is the dynamically created elements do not follow the CSS rules, although they're created with the right classname. This is surprising.
Here's my HTML:
<div id='menu1'>
<ul class='menu'>
<?php
$sql = /// /* some sql string, which works */
$result = mysql_query($sql);
while($row = mysql_fetch_array( $result ))
{
$prod_id = $row['product_id'];
$prod_name = $row['product_name'];
echo "<li data-title='$prod_id' class='menu1_item'>".$prod_name."</li> ";
}
?>
</ul>
</div>
<div id='menu2'>
<ul class='menu'>
</ul>
</div>
<div id='menu3'>
<ul class='menu'>
</ul>
</div>
Here's my jquery:
$(".menu1_item").click( function() {
$.ajax({
type: "POST",
data: { m: '2', id: $(this).attr('data-title') },
url: "fetch_designs.php",
success: function(msg){
if (msg != ''){
$("#menu2").html(msg).show();
$(".menu2_item").bind('click',function() {
$.ajax({
type: "POST",
data: { m: '3', id: $(this).attr('data-title') },
url: "fetch_designs.php",
success: function(msg){
if (msg != ''){
$("#menu3").html(msg).show();
}
}
});
//end menu2 click
});
//end if
}
//end success
}
});
//end menu1 click
});
My CSS is as follows:
ul.menu li
{
cursor:pointer;
list-style: none;
}
#menu1, #menu2, #menu3
{
margin:50px;
position:relative;
display:block;
float:left;
}
.menu1-item .menu2-item .menu3-item
{
padding:4px;
background-color:lightgray;
color:black;
cursor:pointer;
}
