Javascript sur de l'HTML généré par Javascript

Bonjour,

Je suis débutant en Jquery, et j'ai un petit soucis.
Je vous explique:

Je fais appel à un xml pour crée différente vignette. Jusque là pas de soucie.
Chaque vignette a un bandeau info qui se lève au survole de celle ci.

<script>
     	
		$('video').ready(function(){
			$.ajax({
				type: "GET",
				url: "sites.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('site').each(function(){
					
						var id = $(this).attr('id');
						
						var img = $(this).find('img').text();
						
						var info = $(this).find('info').text();
						
						var jscript = $(this).find('jscript').text();
						
						
						
						
						$('<div class ="'+id+'"></div>').html('<a href="'+info+'"><img src="'+img+'"></a> <div class = "videoinfo"> <a> '+info+'</a></div>').appendTo('#video');
						
					
					});
				}
			});
		});
		
</script>

Le html généré ressemble a ça.

<div class="videoimg">
<a href="prochainement"><img src="img/01.jpg"></a> 
<div class="videoinfo"> <a> prochainement</a></div></div>

Et j'aimerai appliqué a ce html généré, le script :

<script>

	$(function() {
			$('.videoimg').hover(function(){
				$(this).find('div.videoinfo').animate({"top": "100px"},{queue:true,duration:350});
			}, function(){
				$(this).find('div.videoinfo').animate({"top": "125px"},{queue:true,duration:350});
			});
		});
</script>

Le code fonctionne très bien lorsque je ne génère pas de html mais sur la partie généré, nada...

J'ai fais mes recherche avant sur le forum, et d'autre, et j'ai vu que la solution était sans doute le .live.

Mais marche pô comme je voudrai, lorsque je me le . live

	$(function() {
			$('.videoimg').live("hover", function(){
				$(this).find('div.videoinfo').animate({"top": "100px"},{queue:true,duration:350});
			}, function(){
				$(this).find('div.videoinfo').animate({"top": "125px"},{queue:true,duration:350});
			});
		});

Le bandeau info se lève me ne redescend pas quelqu'un pourrai m'éclairer.

Merci beaucoup

Bonne journée

William
Modifié par WilliamMAX (09 May 2011 - 11:14)

La solution est bien la fonction live(). En revanche, l'évènement que tu dois écouter c'est pas "hover" mais "mouseover".

Merci pour ton aide
Donc avec mouseover

	$(function() {
			$('.videoimg').live("mouseover", function(){
				$(this).find('div.videoinfo').animate({"top": "100px"},{queue:true,duration:350});
			}, function(){
				$(this).find('div.videoinfo').animate({"top": "125px"},{queue:true,duration:350});
			});
		});

Toujours le meme probleme :s L'info monte, mais ne redescent jamais

Peut etre plus facile en voyant le résultat

http://www.william-art.fr/test/video2.html


Edit


Oups

	$(function() {
			$('.videoimg').live("mouseover", function(){
				$(this).find('div.videoinfo').animate({"top": "100px"},{queue:true,duration:350});
			}), $('.videoimg').live("mouseout", function(){
				$(this).find('div.videoinfo').animate({"top": "125px"},{queue:true,duration:350});
			});
		});
		

Là ça marche.

Encore merci
Modifié par WilliamMAX (09 May 2011 - 12:00)

En faite non

Le résultat est... plutot étrange

http://www.william-art.fr/test/video2.html


ça monte et descente aléatoirement....

_______________________________
Edit
Solution:

  $(function() { 
            $('.videoimg').live("mouseover", function(){ 
                $(this).find('div.videoinfo').stop().animate({"top": "100px"},{queue:true,duration:350}); 
            }), $('.videoimg').live("mouseout", function(){ 
                $(this).find('div.videoinfo').stop().animate({"top": "125px"},{queue:true,duration:350}); 
            }); 
        }); 
        

Modifié par WilliamMAX (09 May 2011 - 15:50)

Bonjour, j'me retrouve avec un autre problème...
Toujours pareil:
Je fais appel à un xml pour crée différente vignette.
Chaque vignette a un bandeau info qui se lève au survole de celle ci. Jusque là pas de soucie. Merci a moust

Mais j'ai voulu utiliser le système quicksand qui permet de sélectionner par catégorie les vignettes et là j'ai quelque soucie, et commence a faire quelque jour que je suis sur ce problème.

Comme vous pouvez le voir ici
http://www.william-art.fr/test/video.html

Le vignette appelé en html reste "normal" mais celle en xml disparaisse, et ne sont pas pris en compte par le menu des catégories.

Mon code

l'appel de XML

<script>
     	
		$('stage').ready(function(){
			$.ajax({
				type: "GET",
				url: "sites.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('site').each(function(){
					
						var id = $(this).attr('id');
						
						var tags = $(this).find('tags').text();
						
						var img = $(this).find('img').text();
						
						var info = $(this).find('info').text();

						
			$('<li class="'+id+'" data-tags="'+tags+'" ><img src="'+img+'"><div class = "videoinfo"> <a href="#">'+info+'</a></div></li>').appendTo('#stage');
						
					
					});
				}
			});
		});
		
</script>

L'info

  $(function() { 
            $('.videoban').live("mouseover", function(){ 
                $(this).find('div.videoinfo').stop().animate({"top": "70px"},{queue:true,duration:250}); 
            }), $('.videoban').live("mouseout", function(){ 
                $(this).find('div.videoinfo').stop().animate({"top": "100px"},{queue:true,duration:250}); 
            }); 
        }); 

Le fichier qui s'occupe du menu categorie et du classement

$(document).ready(function(){
	
	var items = $('.videoban'),
		itemsByTags = {};
	
	// Looping though all the li items:
	
	items.each(function(i){
		var elem = $(this),
			tags = elem.data('tags').split(',');
		
		// Adding a data-id attribute. Required by the Quicksand plugin:
		elem.attr('data-id',i);
		
		$.each(tags,function(key,value){
			
			// Removing extra whitespace:
			value = $.trim(value);
			
			if(!(value in itemsByTags)){
				// Create an empty array to hold this item:
				itemsByTags[value] = [];
			}
			
			// Each item is added to one array per tag:
			itemsByTags[value].push(elem);
		});
		
	});

	// Creating the "Everything" option in the menu:
	createList('All',items);

	// Looping though the arrays in itemsByTags:
	$.each(itemsByTags,function(k,v){
		createList(k,v);
	});
	
	$('#menuvideo a').live('click',function(e){
		var link = $(this);
		
		link.addClass('active').siblings().removeClass('active');
		
		// Using the Quicksand plugin to animate the li items.
		// It uses data('list') defined by our createList function:
		
		$('#stage').quicksand(link.data('list').find('li'));
		e.preventDefault();
	});
	
	$('#menuvideo a:first').click();
	
	function createList(text,items){
		
		// This is a helper function that takes the
		// text of a menu button and array of li items
		
		// Creating an empty unordered list:
		var ul = $('<ul>',{'class':'hidden'});
		
		$.each(items,function(){
			// Creating a copy of each li item
			// and adding it to the list:
			
			$(this).clone().appendTo(ul);
		});

		ul.appendTo('#video');

		// Creating a menu item. The unordered list is added
		// as a data parameter (available via .data('list'):
		
		var a = $('<a>',{
			html: text,
			href:'#',
			data: {list:ul}
		}).appendTo('#menuvideo');
	}
});

Dsl pour ce pavet

Donc toujours pareil le .live parait etre la solution... Mais a aucun moment il fonctionne et il m'affche comme erreur

Erreur : (a || "").split is not a function
Fichier Source : http://localhost/IMP/js/jquery.min.js
Ligne : 17

J'espere que quelqu'un va pouvoir m'aider... j'en dors plus ^^

Bon j'crois avoir trouvé ^^ Toujours pareil lorsqu'on poste qu'on trouve....

J'sais pas si c'est très correct, mais j'ai pas vu de bug...

Donc j'ai changé ça:

		$(function(){
			$.ajax({
				type: "GET",
				url: "sites.xml",
				dataType: "xml",
				success: function(xml) {
					$(xml).find('site').each(function(){
					
						var id = $(this).attr('id');
						
						var tags = $(this).find('tags').text();
						
						var img = $(this).find('img').text();
						
						var info = $(this).find('info').text();

						
			$('<li class="'+id+'" data-tags="'+tags+'" ><img src="'+img+'"><div class = "videoinfo"> <a href="#">'+info+'</a></div></li>').appendTo('#stage');
						
					
					});
				}
			});
			
			$.ajax({
				
				url: "js/menuvideo.js",
				dataType: "script",
				success: function() {
				

						
			$(this).addClass("done");
						
					
					
				}
			});
			
			
		});
		

Au lieu d'appeler mon script dans l'html je l'appel dans mon script.