Insérer un lien dynamiquement

Bonjour,

je débute avec jQuery...
je souhaiterais ajouter un lien a href à un titre créé avec jQuery depuis une fonction.

J'ai mis :

Code:

---

jQuery('.video').html(json.title).attr('href',json.url).attr('target','_blank');

---

Mais je récupère ce résultat

Code:

---

<h4 class="mes classes" href="https://www.aaaa.fr" target="_blank">Mon titre</h4>

---

J'aurais voulu

Code:

---

<h4 class="mes classes"><a href="https://www.aaaa.fr" target="_blank">Mon titre</a></h4>

---

Comment s'y prendre ?

Merci pour l'aide
Paul

Bonjour,

Code:

---

<h4 class="video autres classes"></h4>

---

Code:

---

1 2 3 4 5 6 7

json = { 'title' : 'Mon titre', 'url' : 'https://www.aaaa.fr', }   jQuery('.video').append('<a>'); jQuery('.video > a').html(json.title).attr('href',json.url).attr('target','_blank');

---

Bravo.
Bravissimo.

Je reste toujours émerveillé de voir le code arriver à faire ce qu'on lui demande.
D'autant plus que je n'arrive pas à bien l'exprimer...
Alors ça a toujours quelque chose de magique.
:ave:

Merci.

Bon, je me suis réjouis trop vite…

Oui le lien en target _blank a bien été généré,
mais Non le contenu textuel n’est pas mis à jour par la fonction alors qu’il le devrait

Bon c’est sans doute de ma faute avec les modifications de code pour essayer de simplifier…


Alors voici :

Code initial avant l’insertion du lien.
L’avant dernière ligne génère le bon texte à chaque lancement de la fonction :

Code:

---

1 2 3 4 5 6 7 8 9

success: function (json) { if (json != 0){ jQuery('.video').html(''); jQuery('.video').html(json.title); jQuery('.video').next().children().attr('src',json.image); jQuery('.video').next().children().css( "cssText", "width: 120px !important" ); jQuery('.video').next().next().html(json.text); jQuery('#end_at').val(json.end_at); }

---

Code actuel :
A l’avant dernière ligne le code génère bien le bon lien,
Mais le contenu textuel n’est plus modifié par la fonction alors qu’il le devrait :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

success: function (json) { if (json != 0){ jQuery('.video').html(''); jQuery('.video').append('<a>'); jQuery('.video > a').html(json.title).attr('href',json.url).attr('target','_blank'); jQuery('.video').next().children().attr('src',json.image); jQuery('.video').next().children().css( "cssText", "width: 120px !important" ); jQuery('.video').next().next().append('<a>'); jQuery('.video > a').next().next().html(json.text).attr('href',json.url).attr('target','_blank'); jQuery('#end_at').val(json.end_at); }

---

Un dernier petit coup de pouce ?
:oops:

Bonjour,

montre le code HTML qui va avec.
.next().next() ? :koi:

Oops... j'aimerais bien te copier/coller le code html mais je ne vois vraiment pas lequel...
:?

En tous cas, utilisé sur une seule ligne, tel quel, ce code fonctionne et génère le bon texte (mis à jour)

Code:

---

jQuery('.video').next().next().html(json.text);

---

C'est simple :

• Tu as des balises avec la classe "video" (.video),
• et un div (?) avec l'id "end_at" (#end_at).

C'est ce qu'on veut voir...
Sinon, on ne peut pas savoir quoi corriger.

OKi
Ça c'est le code html généré :

Code:

---

1 2 3 4 5 6

<div class="nspArt nspCol3" style="padding:0 20px 20px 0;clear:both;"> <input type="hidden" name="end_at" id="end_at" value="2018-10-12T15:40:01+0000"> <h4 class=" nspHeader tleft fnone has-image"><a href="https://www.test.com" target="_blank">Texte OK</a></h4><a href="https://www.test.com" class="nspImageWrapper tleft fleft gkResponsive" style="margin:6px 14px 0 0;" target="_blank"><img class="nspImage" src="mon_image_OK MISE A JOUR.png" alt="" style="width: 120px !important;"></a> <p class="nspText tleft fnull"><a href="https://www.test.com" target="_blank">Texte NON MIS A JOUR</a><a></a><a></a></p><a class="readon fright" href="https://www.test.com" target="_blank">Texte OK</a> </div>

---

Ça n'est pas ce que tu me demandais ?
:roll:

Bonjour,

Code:

---

.....Texte NON MIS A JOUR</a><a></a><a></a>.....

---

1- Et ça, ça ne te dérange pas ?
Ça devrait pourtant te mettre la puce à l'oreille.

2- Et je ne vois aucune balise avec la classe "video" ?? 8O

3- Quel est le code initial (AVANT modif. JS) ?

4- A tout hasard je dirais qu'il faut remplacer :

Code:

---

jQuery('.video > a').next().next().html(json.text).attr('href',json.url).attr('target','_blank');

---

par

Code:

---

jQuery('.video').next().next().find('a').html(json.text).attr('href',json.url).attr('target','_blank');

---

Pardon, je n'avais pas vu que tu avais édité ton post initial et je cherchais de mon côté.

De ton côté, ton "à tout hasard" tombe évidemment pile dedans !
:D

Je récupère le bon texte, mais doublé.
Alors j'ai enlevé à mon code :

Code:

---

jQuery('.video').next().next().append('<a>');

---

qui était à l'origine des <a></a> successifs à chaque reload du script.

Tout semble impec !

Merci infiniment.
(si, si...)
:zoubi:

Bonjour,
je viens de regarder rapidement ton code jQuery et le moins que l'on puisse dire qu'il te facilite le « plantage » !
Exemple :

Code:

---

1 2	jQuery('.video').append('<a>'); jQuery('.video > a').html(json.title).attr('href', json.url).attr('target', '_blank');

---

tu accèdes en fait au même élément <a> crée fraichement.

Tu aurais meilleur compte de créer cet élément en utilisant le chainage, tu gagnerais en lisibilité

Code:

---

1 2 3 4 5 6 7 8

var elem = $("<a></a>", { "href": json.url, "title": json.title, "target": "_blank", "style": json.style, "text": json.texte }) .appendTo($("'.video"));

---

Une bonne solution est souvent d'écrire le HTML auquel on veut aboutir pour bien en visualiser les hiérarchies.