[résolu] Pb JQuery onclick sur Chrome

Bonjour,

Je débute en jQuery, je peux donc commettre quelques erreurs.

J'ai mis en place un système pour charger des pages par Ajax selon divers critères (ça peut être du multi-pages sur des listes longues, un menu de filtrage ou autre...).

J'ai donc créé un menu par <ul><li> avec un petit bout de jQuery pour intercepter l'événement "onclick" sur les <li>. Ca fonctionne très bien, sauf que pour le chargement initial, je génère l'événement "onclick" sur le 1er <li>. Ca marche sous Firefox et sous IE, et ça plante sous Chrome et Safari.

Le menu de navigation (par exemple) :

    <ul class='pagine'>
      <li class='page_1 active' rel='pageAnnuaire.php|1'>1</li>
      <li class='page_2' rel='pageAnnuaire.php|2'>2</li>
      <li class='page_3' rel='pageAnnuaire.php|3'>3</li>
      <li class='page_4' rel='pageAnnuaire.php|4'>4</li>
      <li class='page_5' rel='pageAnnuaire.php|5'>5</li>
      <li class='page_6' rel='pageAnnuaire.php|6'>6</li>
      <li class='page_7' rel='pageAnnuaire.php|7'>7</li>
      <li class='page_8' rel='pageAnnuaire.php|8'>8</li>
      <li class='page_9' rel='pageAnnuaire.php|9'>9</li>
      <li class='page_10' rel='pageAnnuaire.php|10'>10</li>
    </ul>

Mon code jQuery :

$(document).ready(function(){
	function chargePage(objet){
		$(objet).click(function(){
			showLoader();
			$(objet).removeClass('active');
			$(this).addClass('active');
			var attributs = $(this).attr('rel').split("|");
			$("#page_contenu").load("pages/chargePage.php?page=" + attributs[0] + "&enreg=" +attributs[1] + "&session=" + session_id, hideLoader);
		});
		// Instruction qui génère une erreur sous Chrome :
		$(objet)[0].click();		
	}
}

Et j'appelle au chargement de ma page :

chargePage('.pagine li');

Sous Chrome/Safari, j'ai l'erreur sur l'instruction

$(objet)[0].click();

Uncaught TypeError: Object #<HTMLLIElement> has no method 'click'

Mais si je clique sur l'un des <li>, le traitement s'effectue correctement.

J'ai testé en supprimant le "[0]"

$(objet).click();

ça fonctionne, sauf que, évidemment, il effectue l'action pour tous les <li>.

Merci de votre aide

Tonio
Modifié par Tonio (15 May 2012 - 12:03)

Hello.

La sytaxe $(selecteur)[0] ne renvoie pas le premier objet jQuery de la sélection, mais l'objet du DOM correspondant à ce premier objet jQuery de la sélection.

Pour filtrer, il faut donc utiliser un first-child dans le sélecteur, ou si tu as déja sauvé ta sélection dans une variable, utiliser eq.

Bonjour, le premier élément du tableau retourne l'élément DOM et non plus l'objet jQuery.

pour sélectionner un élément dans une liste d'objets trouvés, utilises first(), eq() ou slice() par exemple.

$(objet).first().click();

Modifié par kustolovic (15 May 2012 - 11:24)

Super, merci

.eq(0) et .first() fonctionnent !

Je retiens .eq(0) pour garder de la souplesse

Merci

Tonio