對jquery的影響創建動態標記

Question

我有一個jquery的問題。我有一個xml文件，用於加載視頻信息列表。在XML中的每個元素，我需要看到一個效果與jQuery（fadetoggle等）。

的問題是，它不工作，我會告訴你的代碼

<script type="text/javascript"> 

$(document).ready(function(){ 
    $.ajax({ type:"GET", url:"menu.xml", dataType:"xml", 
     success: function(xml){ 
      $(xml).find("food").each(function(){ 
       var nome = $(this).find('nome').text(); 
     var ingredienti = $(this).find('ingredienti').text(); 

       $("#listapizza").append("<li class=\"list\"><a class=\"acla\" href=\"#\">"+nome+"</a> <div class=\"divHide\" style=\"display:none\">("+ingredienti+")</div></li>"); 
       }); 
      }, 
      error: function(request, error, tipo_errore) { alert(error+': '+ tipo_errore); } 
     }); 

     $(".acla").click(function(){ 
      $(this).next().fadeToggle(1500); 
     }); 
    }); 

</script> 

這是

<ul id="listapizza"> 
        </ul> 

我不明白爲什麼它不工作

列表的容器

Tnx

Answer 1

使用事件委託，因爲它是動態追加的。

$("#listapizza").on("click", ".acla", function(){ 
    $(this).next().fadeToggle(1500); 
});