Discussion :

[Octocat]

Bonjour à tous,

Je m’entraîne sur jQuery depuis quelques temps en essayant de créer mes propres fonctions, dont une fonction qui permet l'ouverture dynamique d'une petite page. Mon code est pas super propre, j'ai fais un JS externe avec une fonction "chargementDynamique();" qui va chercher toutes les balises avec la classe "lienDynamique" afin d'y bind mes fonctions. Tout marche sans soucis.

Là ou j'aimerais faire quelque chose de plus propre, c'est essayer de transformer tout ça en plugin, pour avoir quelque chose de ce style dans mon code source : $(".lienDynamique").chargementDynamique(); afin de faire qu'un seul appel et de pouvoir réutiliser plus facilement ma fonction à travers les différentes pages.

Pour commencer et tester le système de plugin, j'ai fais ça :

Code :

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

1
2
3
4
5
6
7
8
9
(function ($) {
	$.fn.chargementDynamique = function() {
		console.log("Test Plugin - Chargement Dynamique");
		this.bind("click", function(event) {
			console.log("Clique sur bouton");
			event.preventDefault();
		}); 
	};
})(jQuery);

Pas d'erreur déjà, mon console.log marche bien, mais là ou ça foire, c'est que mon preventDefault ne fonctionne pas, et du coup quand je clique sur mes liens avec la classe lienDynamique, la page s'ouvre, alors que je veux empêcher l'ouverture... après le reste je verrais, mais là déjà, ça part mal pour ma fonction... Merci pour votre aide.

[Bovino]

C'est bien de créer ton plugin, mais ensuite, pour qu'il fonctionne, il faut l'appeler !

Code :

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

1
2
3
4
5
6
7
8
9
10
(function ($) {
	$.fn.chargementDynamique = function() {
		console.log("Test Plugin - Chargement Dynamique");
		this.bind("click", function(event) {
			console.log("Clique sur bouton");
			event.preventDefault();
		}); 
	};
})(jQuery);
$(".lienDynamique").chargementDynamique();

Fonctionne correctement (enfin, pour peu que tu aies des liens avec cette classe bien sûr).

[Octocat]

Bien sur que je l'appelle, dans mon index.

D'où le console.log en fait, histoire de voir que ça passe bien dans ma fonction... et pourtant... le preventdefault ne veut pas.

EDIT : Oh ben zut, je viens de trouver à l'instant. Le bouton sur lequel je faisais le test était chargé via un "load", apparemment ça ne fonctionne pas même si je met bien dans le documentready... Du coup je viens de lancer la fonction en faisant un contrôle sur la fonction "load" pour savoir si mon bouton été bien chargé, et là ça fonctionne... c'était idiot.

[Bovino]

Et pourtant...

https://jsfiddle.net/s1vpubLc/

A moins bien sûr que ta classe "lienDynamique" corresponde à des éléments qui sont ajoutés après que tu aies appelé ton plugin...