Pourquoi ma fonction ne fonctionne qu'une fois

Invité · 27/04/2018, 11h16

Bonjour

J ai un index dont une partie du code est

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="view">
    <span class="sp-link" data-sp-url="page_2">page 2</span>
    <p> <span class="sp-link" data-sp-url="page_3">page 3</span></p>
    <p>div view</p>
</div>
<!--  Scripts-->
<script src="jquery.js"></script>
<script>
    $(".sp-link").click(function() {
        var lurl = $(this).data("sp-url");
        $.get('pages/' + lurl + '.html', function(pageContent) {
            $('#view').html(pageContent);
        })
    });
</script>

Depuis mon index j appelle sans pb les pages 2 ou 3 mais quand j ai chargé le contenu dans ma div view cela ne fonctionne plus !,
c est à dire que le click sur mes class="sp-link" chargee dans view ne chargent rien

J ai tenté en modifiant le chargement comme ceci $('#view').load('pages/' + lurl + '.html'); mais toujours rien !

Si dans mes pages chargées je mets un <a href="../index.html">Retour à l index</a> cela fonctionne...

Un peu d aide serait bienvenue.
merci

**bonjourajax** · 27/04/2018, 11h42

Bonjour, pour ton code qui ne "clique qu'une fois" essaye en changeant la premiere ligne par

Code :

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

1
2
 
$('body').on('click', '[class="sp-link"]', function() {

La methode .load() est deprecated

que t'indique

Code :

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

1
2
3
4
 
 $.get('pages/' + lurl + '.html', function(pageContent) {
          alert(pageContent);
        });

Invité · 27/04/2018, 11h58

merci, cela fonctionne

ce qui m est indiqué c est

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

mais j avais cherché sur http://api.jquery.com et n ai pas trouvé qu elle etait depreciated...

Par quoi devrais-je la remplacer alors mon but etant de changer dynamiquement le contenu d une div

**psychadelic** · 27/04/2018, 14h31

Envoyé par rooky06

Par quoi devrais-je la remplacer alors mon but etant de changer dynamiquement le contenu d une div

en jQuery = $.load() => http://api.jquery.com/load/

en Javascript = fetch() => https://developer.mozilla.org/fr/doc...PI/Using_Fetch
( https://caniuse.com/#search=fetch )

**bonjourajax** · 27/04/2018, 15h07

Ce code fonctionne :

Code :

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

1
2
3
4
5
6
 
$('body').on('click', '[class="sp-link"]', function() {
        var lurl = $(this).data("sp-url");
 
        $('#view').load('pages/' + lurl + '.html');
});

A noter que $.load() peut prendre en parametre une fonction callback

Invité · 27/04/2018, 16h58

merci à tous

Invité · 21/05/2018, 22h15

je me permets de remonter ce post que j avais mis en resolu pour avoir une petite precision

Code :

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

[class="sp-link"]

fonctionne parfaitement avec la seule class sp-link mais si cette classe est parmi d autres, par exemple

Code :

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

class="truc sp-link machin chose"

comment procéder ?

Merci pour cette precision

**psychadelic** · 21/05/2018, 23h38

Tu peux tout aussi bien écrire

Code :

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

$('body').on('click', ".sp-link",  function() { ...

ou :

Code :

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

$(".sp-link").on('click',   function() { ...

ou :

Code :

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

$(".sp-link").click(function() { ...

qui permettent tous l'exécution d'une fonction sur un evt "click" sur tous les éléments utilisant la classe "sp-link" et quel que soit le nombre de classes qui leur soient affectés.

Le premier cas permet l'exec de la fonction lié à tout élément ayant pour classe "sp-link" présent sur la page au moment du click, même si cet élément n'était pas présent lors du chargement initial de la page.

Invité · 21/05/2018, 23h45

merci d avoir pris le temps de répondre à ma question mais j avais essayé en premier ce que tu proposes et cela ne fonctionne pas car j essaie de faire une petite appli via cordova et les pages sont charéges par un routeur et la seule façon de faire que cela fonctionne est celle proposée par bonjourajax.

Actuellement j encapsule sp-link dans une div qui apporte le style pour remédier au fait que je n ai jamais les même classes qui accompagnent sp-link, ce qui aurait permis de modifier le code fonctionnel de bonjourajax...

j espère avoir été assez clair pke à la relecture ça semble tout de même un peu confus...

**bonjourajax** · 22/05/2018, 01h54

Bonsoir
Voila comment tu peux remédier à ce probleme

Code javascript :

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

1
2
 
$('body').on('click', '[class^="sp-link"]', function()

Il faut que la classe sp-link soit la premiere classe de ton élément
Au fait, as tu réussi a mettre les notifications sur ton appli ?
Ayant voulu testé Cordova (phonegap) j'avais posé une question la-dessus pas de réponse depuis des semaine a croire que personne ne s'en sert :p

Invité · 22/05/2018, 02h03

merci je vais tester ça des demain

pour les notifications... je n en suis pas encore là mais j ai vu qu il y avait au moins unplugin https://github.com/phonegap/phonegap...NSTALLATION.md

sinon j avais pensé à utiliser les sockets car j avais trouvé le plugin avant de savoir que les notifications existaient

et oui je ne suis passé que ectte anné au smartphone

**bonjourajax** · 22/05/2018, 02h06

Ca marche tiens moi au courant !
merci pour le plugin je regarde ca (et pour les sockets tu t'y es pris comment?)

Invité · 22/05/2018, 09h15

pour les sockets, pas encore fait, c etait l idee premiere mais je n'en suis pas encore arrivé à cette étapte...

**Watilin** · 22/05/2018, 12h40

Envoyé par bonjourajax

Code javascript :

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

1
2
 
$('body').on('click', '[class^="sp-link"]', function()

Il faut que la classe sp-link soit la premiere classe de ton élément

Ou sinon [class*="sp-link"].

Petite précision : .sp-link est un sélecteur de classe alors que [class="sp-link"] est un sélecteur d’attribut. Il vaut mieux éviter de recourir à un sélecteur d’attribut « nu » car c’est équivalent au sélecteur universel *[class="sp-link"], qui est peu performant avec les moteurs CSS des navigateurs actuels.

Voir l’excellent article CSS Performance Has Changed (for the Better) de Nicole Sullivan, ou Efficiently Rendering CSS pour une version plus courte.

Invité · 22/05/2018, 16h39

merci je vais aller voir cela

**SpaceFrog** · 22/05/2018, 16h48

Petite précision aussi concenrant le comportement de qu'une fois ...

Ton code en soi ne précise pas "une seule fois"
Ce qui se passe en fait c'est que le callback de ton code vient écraser le contenu HTML existant en le remplaçant pas le code reçu en retour d'ajax.
Du coup les éléments qui avaient reçu les attributions de click au chargement de page sont détruits et remplacés par d'autres qui eux n'ont pas reçu l’attribution du click

Il existe alors 3 possibilités:
* Réattribuer les click après le remplacement du code
* Faire du on('click', ... par délégation à partir d'un parent ( ainsi les éléments nouveaux créés après le ready se voient automatiquement attribué les évènements du ready )
* utiliser le delegate() qui fait en gros la même chose que le précédent

**bonjourajax** · 22/05/2018, 19h10

Bonjour,
Watilin c'est obligé d'utiliser [class="sp-link"] car .sp-link ne fonctionne pas sur son système .

**NoSmoking** · 23/05/2018, 15h13

Bonjour,

Envoyé par bonjourajax

... car .sp-link ne fonctionne pas sur son système ...

peux de chance que cela ne fonctionne pas sur un quelconque navigateur en utilisant jQuery et en « Vanilla JS » c'est reconnu depuis IE8 via querySelector(All), autant dire un sacré bail !

**bonjourajax** · 23/05/2018, 15h22

merci d avoir pris le temps de répondre à ma question mais j avais essayé en premier ce que tu proposes et cela ne fonctionne pas car j essaie de faire une petite appli via cordova et les pages sont charéges par un routeur et la seule façon de faire que cela fonctionne est celle proposée par bonjourajax.

Actuellement j encapsule sp-link dans une div qui apporte le style pour remédier au fait que je n ai jamais les même classes qui accompagnent sp-link, ce qui aurait permis de modifier le code fonctionnel de bonjourajax...

j espère avoir été assez clair pke à la relecture ça semble tout de même un peu confus...

Bonjour,
Apparemment cela ne fonctionne quand meme pas sur son appli Cordova

**NoSmoking** · 23/05/2018, 15h52

Il me semble que c'était sa première préoccupation liée au fait que les éléments étaient simplement détruits et recrées et le fait de mettre un écouteur sur un parent à résolu ce problème.

Le fait de maintenant vouloir cibler via le sélecteur [class="sp-link"], tout à était dit par les différents intervenants.

Au passage @rooky06 il eut été préférable d'ouvrir une nouvelle discussion les deux soucis n'ayant rien à voir entre eux si ce n'est ton projet !

Pourquoi ma fonction ne fonctionne qu'une fois

jQuery

Discussions similaires

Partager

Partager