私は ajax を使用してメニューを動的に設定しています。問題は、動的に作成された要素が正しいクラス名で作成されているにもかかわらず、CSS 規則に従っていないことです。これは驚くべきことです。
ここに私の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>
これが私の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
});
私のCSSは次のとおりです。
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;
}
新しいメニュー要素を生成する fetch-designs.php の PHP コードは次のようになります。
$nextmenu = $_POST['m'];
$id = $_POST['id'];
if($nextmenu == '2')
{
// do something, and then finally generate new menu item as below:
echo"<li data-title='$tpl_id' class='menu2_item' >".$tpl_name."</li> ";
}
}
elseif ($nextmenu=='3')
{
// do something, and then finally generate new link as below
echo"<li class='menu3_item' ><a href='design_product.php?id=$d_id'>$d_name</a></li> ";
}