11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je suis nouveau ici, j'espère que vous ne m'en tiendrez pas rigueur !

Je suis en train de bidouiller de l'Ajax dans l'admin de Wordpress 3.2.1 pour la première fois.

J'ai créé une metabox avec un input. La valeur de cet input me sert à faire une requête ajax avec jQuery. Ce qui marche très bien. Mais je veux maintenant pouvoir cliquer sur les résultats de ma requête afin de déclencher une deuxième requête ajax. (en gros, j'ai un input qui me pemet d'obtenir une liste de films, je veux pouvoir cliquer sur un film pour obtenir le détail du film)

Mon bug, c'est que jQuery n'arrive pas a utiliser les éléments qui ont été générés avec Ajax. J'arrive pourtant à les styler en css...

Je vous joins des bouts de code :

Fonction d'affichage en php :

function gtk_ajax_get_films() {
  $alloID = isset($_POST['alloID'])?$_POST['alloID']:null;
  if ( $alloID ) {
    // Inclure l'API Allociné
	require_once "api/api-allocine/include.php";

	// Définir les options AlloMovie
	$options = array( 'code' => $alloID, );	
	// Création de l'objet AlloMovie (et exécution de la requête)
	$allo = new AlloMovie($options);
    /** Affichage des informations AlloMovie **/
?>
<div class="divaddmovie">
<a class="gtkaddmovie" title="<?php echo $allo->d("titre") ?>" id="<?php echo $allo->d("id") ?>">add movie</a>
<img src="<?php echo Allo::image($allo->d("poster"), 30) ?>" alt="<?php echo $allo->d("titre") ?>" style="float:left;margin-right:10px;margin-bottom:0px;" />
<h4 class="copymovie" style="float:left;"><?php echo $allo->d('titre') . " (" . $allo->d('production','année') . ")";  ?></h4>
</div>
<?php //end divaddmovie
	}
  die;
}
add_action('wp_ajax_get_films', 'gtk_ajax_get_films' );


J'ai mis des classes css partout, mais normalement, je veux pouvoir cliquer sur le lien avec la classe .gtkaddmovie

Mon code js :

jQuery(document).ready(function($) {
    
    jQuery("#filmid_input").keyup( function() {
    	jQuery("#gtkGetFilmLoader").show();
		var thisfilmid = jQuery("#filmid_input").val();
		
    	//POST the data and append the results to the results div
    	jQuery.post(ajaxurl, {
    		action: 'get_films',
        	alloID: thisfilmid,
    	}, function(response) {
    		jQuery("#f_preview").html(response);
    		jQuery("#gtkGetFilmLoader").fadeOut();
    	});
    }).keyup();
    
   // Fonctionne sur #f_preview (le conteneur) mais pas les éléments
 	jQuery(".gtkaddmovie").click( function() {
    	alert('Handler for .click() called.');
    	});
    
});


Tous les éléments sauf ceux générés dans #f_preview réagissent au clic...

Est-ce lié à la méthode jQuery.post ???

merci pour votre avis !
Modifié par dgilz (23 Jan 2012 - 19:47)
Après un tour dans la doc de jQuery, problème résolu avec .live() :
jQuery(".gtkaddmovie").live('click', function() {
        alert('Handler for .click() called.');
});


Désolé pour le dérangement Smiley cligne