I have a problem with Jquery. I have an xml file that I use to load a list of video information. On each element in the XML I need to see an effect with jquery (fadetoggle etc).
The problem is that it does not work, I show you the code
<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>
This is a container of list
<ul id="listapizza">
</ul>
I can not understand why it does not work
Tnx
Use event-delegation since it is dynamically appended.
$("#listapizza").on("click", ".acla", function(){
$(this).next().fadeToggle(1500);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.