Trigger ou délégation

Je ne comprends pas bien comment je peux détecter un clic sur un span et le répercuter sur le input se situant à l'intérieur... (tout en écrivant ceci, je suis en train de me dire que cela peut venir aussi du fait que le span autour de mon input est créé dynamiquement donc n'existe pas dans le dom...) :

$(document).on("click", ".sp-button", function(event) {
        $(this).children("input").click();
        event.stopPropagation();
    });

Merci d'avance

En l'occurrence, ça boucle...
Modifié par Manhattan (06 Apr 2016 - 15:44)

J'ai écrit ceci qui fonctionne mais je pense que ce n'est pas très propre et qu'il y a mieux et plus concis :

$(".sp-button").click(function() {
        $(this).children("input").click();
    });
    $(".sp-button>input").click(function(e){
        e.stopImmediatePropagation();
    });

Bonjour,

Je pense que tu n'as pas le choix, il te faut arrêter la propagation dans les deux cas :
http://codepen.io/anon/pen/wGPZbv

$('input').click(function(event) {
  event.stopPropagation();
  console.log("Clic input")
});

$(document).on("click", ".sp-button", function(event) {
  event.stopPropagation();
  console.log("Clic sp-button")
  $(this).children("input").click();
});

Je suis resté sur ta première solution qui au final fonctionne bien.
:)

Bonjour,

Un clic dans un span qui doit déclencher le même effet qu'un clic sur l'input qui est à l'intérieur. Pour moi ça ressemble clairement à un label refoulé. Pourquoi tu n'utiliserais pas un label ? Sans même parler du bénéfice d'accessibilité que ça apporte, il a implicitement le comportement exact que tu essaies de programmer.

Désolé si je me trompe totalement, mais pour moi ça me paraît tellement évident...
Modifié par QuentinC (06 Apr 2016 - 21:35)

Bonsoir Quentin,

En fait il s'agit de style : j'ai utilisé une animation au survol de mes boutons qui nécessite un pseudo élément after. Le formulaire nu généré par Mailchimp pour permettre aux utilisateurs de s'enregistrer sur une newsletter ne me propose qu'un input type submit sur lequel je ne peux ajouter de pseudo élément. Et comme je suis assez chieur pour que ce bouton ait le même style que les autres, je l'ai encadré d'un span sur lequel je gère mon pseudo élément, et ce span me retire la possibilité de cliquer sur mon input type submit. D'où le clic qui doit générer un clic...

Je t'accorde le fait que niveau accessibilité ce n'est certainement pas top, mais si tu voyais déjà à quel point il est difficile de vendre à des petites entreprises des notions de base telles que le respect des contrastes... Je ne leur dis même pas que j'ai les moyens d'enlever l'outline ou que j'ai géré l'ensemble accessible au clavier et lorsque par hasard au détour d'une tabulation ils découvrent un menu en haut dont il n'ont jamais entendu parler (en vérité si je leur parle d'accessibilité mais cela rentre par une oreille et ressort par l'autre) ils font des gros yeux et moi je leur réexplique l'intérêt et le besoin.

Modifié par Manhattan (06 Apr 2016 - 22:01)

Oui, le button est facilement "stylable".
J'ai peut-être loupé quelque-chose mais je ne sais pas jusqu'à quel point on peut modifier un formulaire généré par Mailchimp.
Je ne pense pas que l'accessibilité est loin d'avoir été comprise : je pense surtout que la majorité des gens se fout de son voisin à partir du moment où ça lui demande de faire des concessions.

Marrant : ton code html non balisé en tant que code dans le message a été interprété par thunderbird. Je me suis demandé au début ce que voulaient dire ces 2 boutons

a écrit :
J'ai peut-être loupé quelque-chose mais je ne sais pas jusqu'à quel point on peut modifier un formulaire généré par Mailchimp.

Bah, techniquement, tant que les données nécessaires sont envoyées correctement et que ça marche, tu fais ce que tu veux.
Suivant ce qu'ils utilisent de leur côté, ils peuvent être plus ou moins tâtillons sur leur validation serveur, mais remplacer un input par un button ne change absolument rien aux données envoyées si tu recopies bien l'attribut value.

Le seul cas où tu pourrais vraiment avoir des problèmes à mon avis, c'est si c'est des gros maniaques qui vont jusqu'à regarder les sites de leurs clients pour voir s'ils utilisent tel quel le code qu'ils ont fourni ou pas, et te pénaliser ou carrément te radier le cas échéant.
Genre, je n'essaierais pas de faire trop de fantaisies avec les standards PCIDSS... mais là, ils s'en foutent royalement je pense.

a écrit :
Je ne pense pas que l'accessibilité est loin d'avoir été comprise : je pense surtout que la majorité des gens se fout de son voisin à partir du moment où ça lui demande de faire des concessions.

Mouais... la logique est donc plutôt « l'accessibilité c'est pour les autres » si je comprends bien.

a écrit :
Marrant : ton code html non balisé en tant que code dans le message a été interprété par thunderbird. Je me suis demandé au début ce que voulaient dire ces 2 boutons

Dew ! Dew ! ON a trouvé un bug !
C'est comme les \ devant les apostrophes dans les mails signalant les MP. Ca fait bientôt 10 ans que je suis inscrit ici, et ils sont toujours là...

Je vais essayer de voir si on peut modifier leur formulaire sans qu'ils râlent.

:)