Discussion :

[neo18045]

Bonsoir à tous et à toutes,

Voilà, je souhaiterai appliquer une redirection quand on clique sur des lignes d'un tableau en excluant certains éléments.

J'ai un tableau classique de ce style :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<table id="competitions">
	<tbody>
		<tr>
			<td><input type="checkbox" /></td>
			<td>...</td>
		</tr>
	</tbody>
</table>

J'applique aux lignes une redirection de la manière suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#competitions tbody tr").click(function() {
	$(location).attr("href", "/index.php");
});

Cela fonction très bien. Maintenant, je souhaiterai faire la même chose mais en excluant le clique sur les checkbox.
Si je clique n'importe où sur la ligne, ma redirection se fait, et si je clique sur la checkbox, la case se coche et aucune redirection.

J'ai essayé de le faire de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#competitions input:checkbox").click(function() {
	return false;
});

Mais là, c'est la checkbox qui ne se coche pas.

Quelle solution y aurait-il ?

Merci par avance pour vos réponses.

[Fenn_]

La fonction attachée à un évènement est appelée avec en paramètre un objet event. Celui-ci contient des informations sur sur l'évènement et son contexte, notamment une référence à l'élément qui a déclenché l'évènement.
De plus, jquery fournit une fonction "is" qui permet de tester un objet jquery par rapport à un sélecteur.
Ce bout de code devrait donc résoudre le problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
//on nomme le paramètre event de l'event handler pour pouvoir le manipuler facilement dans la fonction 
$("#competitions tbody tr").click(function(event) {
        //l'action n'est exécutée que si l'élément d'origine n'est pas un input
	if(!$(event.target).is("input")){
		$(location).attr("href", "/index.php");
	}	
});

La solution d'ajouter un second event handler peut fonctionner aussi (et même s'avérer nécessaire quand l'évènement doit être intercepté par un intermédiaire), mais dois s'écrire de cette façon:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$("#competitions input:checkbox").click(function(event) {
        //indique que l'évènement ne doit pas remonter plus haut dans le DOM
	event.stopImmediatePropagation();
});

[neo18045]

Merci Fenn_

Le event.target était exactement ce qu'il me fallait.